让浮动子元素确定父宽度

Question

这是一个例子

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 解决方案。谢谢

Answer 1

除了 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;
}

http://jsfiddle.net/tKz8b/

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;
}

http://jsfiddle.net/LYrWx/1/

Answer 2

通过将您的 container div 包装在另一个 wrapper div 中，您可以将红色容器 div 居中，并且红色 div 将仅与其浮动的子元素一样宽。

HTML

<div class="centered">
    <div class="container">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

CSS

.centered {
    text-align: center;
}
.container {
    background: red;
    padding: 10px;
    display: inline-block;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

小提琴：http://jsfiddle.net/SbPRg/

Answer 3

在这里聚会迟到了，但您真正需要的是添加display: inline-block。为了使.container div 居中，只需将text-align: center 应用于包含it 的任何内容。

JSFiddle：http://jsfiddle.net/LwXhE/24/

Answer 4

将position:fixed; 添加到容器中

.container {
    background: red;
    padding: 10px;
    position:fixed;

Fiddle