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

通过将容器 div包装在另一个包装器 div中，您可以将红色容器div居中，红色div只会与浮动子容器一样宽。< / p>

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

使浮动子元素确定父宽度

4 个答案: