我有以下设置,但是将 div 的宽度设置为 30% 左右并不能始终如一地工作(一旦窗口宽度小于某个数字,第三个 div 就会低于某个数字。
有没有更好的方法来做到这一点,以便我的 div 始终保持内联并不断变得越来越小,同时它们之间的边距保持固定为 18px?
CSS :
.parent {
width: 100%;
height: 50px;
}
.child {
float: left;
margin-right: 18px;
border: 2px solid white;
text-align: center;
line-height: 50px;
height: 100%;
width: ~30%; /* doesn't work */
}
.child:nth-child(3) {
margin-right: 0;
}
HTML :
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child">three</div>
</div>
如果您正在寻求 IE8 支持,并且可以更改标记,则可以将块嵌套在 33.33% 宽度元素内。
要支持 IE8,您需要摆脱nth-child() http://caniuse.com/#search=nth-child宣言。为了仅具有内部间隙,我使用了此处描述的技术:仅具有内部填充的项目网格 https://stackoverflow.com/questions/23328858/items-grid-with-inner-padding-only/23875329#23875329.
DEMO http://jsfiddle.net/webtiki/hrda3568/
body{
overflow:hidden;
margin:0;
}
.wrap{
margin: 0 -9px;
}
.box {
width:33.33%;
float:left;
}
.box div {
background:grey;
height:150px;
margin:0 9px;
}
<div class="wrap">
<div class="box">
<div>one</div>
</div>
<div class="box">
<div>two</div>
</div>
<div class="box">
<div>three</div>
</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)