4

这是一个例子

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

4

4 回答 4

4

除了 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/

于 2013-10-29T08:53:01.367 回答
3

通过将您的容器div 包装在另一个包装器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/

于 2013-08-28T08:25:55.383 回答
0

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

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

于 2014-10-21T06:48:50.027 回答
-3

添加 position:fixed;到容器

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

小提琴

于 2013-08-28T08:24:40.237 回答