我是网页初学者，我做了个个人网站，是用div布局的，在一些宽屏上显示就全乱了，在我用来做网页的那台电脑上就显示的挺整齐的。这是什么原因？
- 提问者网友：喧嚣尘世
- 2021-04-12 02:21
- 五星知识达人网友：行路难
- 2021-04-12 03:22
- 1楼网友：持酒劝斜阳
- 2021-04-12 04:45
div层如果没定位好,在不同分辨率的显示屏或不同的浏览器上就会出现不同的队列布局.
例:CSS实现三行三列等高布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>The Holy Grail of Layouts: Example #3: A List Apart</title> <style type="text/css">
body { min-width: 630px; }
#container { padding-left: 200px; padding-right: 190px; } #container .column { position: relative; float: left; } #center { padding: 10px 20px; width: 100%; } #left { width: 180px; padding: 0 10px; right: 240px; margin-left: -100%; } #right { width: 130px; padding: 0 10px; margin-right: -100%; } #footer { clear: both; } * html #left { left: 150px; }
#container { overflow: hidden; }
#container .column { padding-bottom: 1001em; margin-bottom: -1000em; }
* html body { overflow: hidden; } * html #footer-wrapper { float: left; position: relative; width: 100%; padding-bottom: 10010px; margin-bottom: -10000px; background: #FFF; }
body { margin: 0; padding: 0; background: #FFF; }
#header, #footer { font-size: large; text-align: center; padding: 0.3em 0; background: #999; }
#left { background: #66F; }
#center { background: #DDD; }
#right { background: #F66; }
#container .column { padding-top: 1em; text-align: justify; }
</style> </head>
<body>
<div id="header">This is the header.</div>
<div id="container">
<div id="center" class="column"> <h1>This is the main content.</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div>
<div id="left" class="column"> <h2>This is the left sidebar.</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div>
<div id="right" class="column"> <h2>This is the right sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div>
</div>
<div id="footer-wrapper"> <div id="footer">This is the footer.</div> </div>
</body>
</html>