Css 流体列布局,它们之间有固定的像素边距?
我不想用JS来解决这个问题,请只使用css解决方案 我希望一个包含div的内部的列能够均匀地装入,即每个列都是容器宽度的三分之一。我在这里做到了- 然而,除此之外,我还希望列之间有Css 流体列布局,它们之间有固定的像素边距?,css,margin,fluid-layout,Css,Margin,Fluid Layout,我不想用JS来解决这个问题,请只使用css解决方案 我希望一个包含div的内部的列能够均匀地装入,即每个列都是容器宽度的三分之一。我在这里做到了- 然而,除此之外,我还希望列之间有10px的边距,第一列亲吻容器的左边缘,而右列亲吻容器的右边缘。见下图,了解原始模型 当浏览器重新调整大小或父容器更改宽度时,我希望列相应地调整大小以填充空间,但它们之间的边距保持固定在10px 没有JS是否可以做到这一点? 使用负边距: .container { background: green; over
10px的边距
,第一列亲吻容器的左边缘,而右列亲吻容器的右边缘。见下图,了解原始模型
当浏览器重新调整大小或父容器更改宽度时,我希望列相应地调整大小以填充空间,但它们之间的边距保持固定在10px
没有JS是否可以做到这一点?
使用负边距:
.container {
background: green;
overflow: auto;
}
.inner {
padding-left: 20px;
}
.box {
width: 33.3%;
background: red;
float: left;
margin-right: 10px;
}
.first {
margin-left: -20px;
}
.last {
width: 33.4%;
margin-right: 0;
/*float:right;*/
}
img {
max-width: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
在Html中:
<div class="container">
<div class="box">
<div class="box-content">
First
</div>
</div>
<div class="box">
<div class="box-content">
SECOND
</div>
</div>
<div class="box last">
<div class="box-content">
Last
</div>
</div>
</div>
如果你想要你的盒子有相同的高度
在css中添加:
.box .box-content {
margin-right: 10px;
background: red;
margin-bottom: -1000px;
padding-bottom: 1000px;
}
同样的高度代码也值得称赞,但它的可靠性如何?铬看起来很棒
.box .box-content {
margin-right: 10px;
background: red;
margin-bottom: -1000px;
padding-bottom: 1000px;
}