我有以下设置,但是将 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 支持,并且可以更改标记,则可以将 block 嵌套在 33.33% 宽度的元素内。
要支持 IE8,您需要get rid of the nth-child()
声明。为了仅具有内部间隙,我使用了此处描述的技术:Items grid with inner padding only .
<强> DEMO
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>
关于css - 3 个流体 Div 宽度 2 个固定边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27375820/