3 Fluid Divs宽度2之间的固定边距? [英] 3 Fluid Divs width 2 Fixed Margins between them?
问题描述
我有以下设置,但是将div的宽度设置为30%左右的值并不能始终如一地工作(一旦窗口宽度小于第三个div下降到的某个数字以下..
I have the following setup, but setting the width of the divs to a something around 30% is not working consistently (once the window width goes less than some number the third divs drops below..
是否有更好的方法,这样我的div始终保持内联并不断变小,而边距保持固定在18px?
Is there a better way of doing this, so that my divs always stay inline and keep getting smaller and smaller while the margin stays fixed at 18px between them ?
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%宽度的元素内.
If you are looking for IE8 support, and can change your markup, you can nest the blocks inside 33.33% width elements.
要获得IE8支持,您需要摆脱nth-child()
声明.为了仅具有内部间隙,我使用了此处介绍的技术:项目仅限内部填充的网格.
For IE8 support, you need to get rid of the nth-child()
declaration. In order to have inner gaps only, I used the technique described here : 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>
这篇关于3 Fluid Divs宽度2之间的固定边距?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!