这是一个例子
http://jsfiddle.net/BringMeAnother/LwXhE/
// html
<div class="container clearfix">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
// css
.container {
background: red;
padding: 10px;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
红色背景的容器似乎总是伸展到100％.我想做的是让它的宽度取决于漂浮的孩子,所以在这种情况下,3倍100px.
我想要这个的原因如下.在灵活的布局中,我有一个容器,其中包含几个不同大小的子元素.这些孩子的宽度和数量可能会有所不同.孩子们总是漂浮着.目标是让漂浮的孩子居中.所以,如果我总是有一个子元素,我只需将其margin-right和margin-left设置为auto.但是,有几个孩子我希望彼此相邻,但是在水平订购之后,我希望那一行在页面上居中.我不能给容器一个固定的宽度,因为儿童的数量和他们的每个宽度都没有提前确定.
我想我可以用javascript做到这一点,但我想知道是否有一个纯粹的CSS解决方案.谢谢
解决方法
除了Adsy建议(将容器的位置设置为固定),您可以：
1)在容器上使用绝对位置：
HTML：
<div class="container"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
CSS：
.container {
background: red;
padding: 10px;
position:absolute;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
2)在容器上设置一个浮子,如果你需要相对/静态定位,这是好的：
HTML：
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="clearfix"></div>
<div>Next</div>
CSS：
.container {
background: red;
padding: 10px;
float: left;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
