当我缩小web 4 div下来到下一行 [英] When i Zoom out web 4 div go down to next line
本文介绍了当我缩小web 4 div下来到下一行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
任何想法为什么当我缩小网站4div总是下去下一行。演示: http://autovin.org/tp/
any idea why when i zoom out website 4div always go down to next line. Demo: http://autovin.org/tp/
/* Reset All Styles */
* {padding:0px; margin:0px;font-family:Segoe UI;}
/* Background */
body {background:url(images/grids.gif) white;}
/* Wrapper */
.wrapper {width:998px;margin:0 auto;}
/* Header */
.header {padding:20px 0 20px 0;}
/* Navigation */
.nav {background:#82b2c9;color:white;}
/* Content */
.content {padding:10px 0;overflow:hidden;}
/* Box */
.box {width:240px; margin:0 10px 10px 0;border:1px solid black;float:left;}
.box:nth-child(4n){margin:0;}
/* Pagination */
.pagination {clear:both;}
/* Footer */
.footer {background:#82b2c9;color:white;}
推荐答案
我只是使用百分比和em单位而不是像素,因为浏览器与它们更加兼容。但在你的情况下,我看不到人们缩小了很远。你想要一个快速修复,但我建议从一开始重新思考这一点。阅读框大小和百分比。箱子大小是超级巨大。祝你好运!
I would just use percentages and em units instead of pixels because browsers are much more compatible with them. But in your case, I don't see people zooming out that far anyways. You want a quick fix, but I suggest rethinking this from the start. Read about box sizing and percentages. Box sizing is super great. Good luck!
http://jsfiddle.net/ sheriffderek / xr6nC /
HTML
HTML
<ul>
<li><a href="#">Your block of text</a></li>
<li><a href="#">Your block of text</a></li>
<li><a href="#">Your block of text</a></li>
<li><a href="#">Your block of text</a></li>
<li><a href="#">Your block of text</a></li>
<!-- etc. -->
</ul>
</div>
CSS
.container {
width: 100%;
max-width: 40em; /* whatever you want */
border: 1px solid red;
overflow: hidden;
}
.container ul {
padding: 0;
margin: 0;
list-style: none;
}
.container a {
width: 22%; /* this isn't perfect - but it would be 23.5% - if you were to use box-sizing: border-box; */
/* which I highly recomend you make part of your workflow in every project */
float: left;
border: 1px solid black;
min-height: 5em;
margin-right: 2%;
margin-bottom: 2%;
}
.container li a:nth-of-type(4n+4) {
margin-right: 0;
}
这篇关于当我缩小web 4 div下来到下一行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文