一个大的div内部有三个小div(左中右结构,中间div较大),我的布局到了大屏幕显示器上就乱了,左、中、右都分开了,中间间隙很大,(理想状态是挨在一起),有什么好方法解决这个问题?
那个div定位用absolute,那个用relative说清楚点喔,谢了--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css"> #container{ margin:0; width:1024px; height:600px; background:aqua; } #left{ background:#ccc; float:left; width:10%; height:100%; } #middle{ background:gray; width:80%; margin:0 10%; height:100%; } #right{ background:#ccc; float:right; width:10%; height:100%; } } </style> <title>无标题 1</title> </head> <body> <div id="container"> <div id="left">left</div> <div id="right">right</div> <div id="middle">middle</div> </div> </body> </html>
css grid layout或者网格布局,有很多现成的css或者js框架
你需要对浏览器的大小进行判断,不同浏览器效果不同,这个是累活,但不难
你固定网页宽度不就可以喽,有了一定的宽度设置,里面的内容就不容易再出现错位了