使用浮动子元素确定父宽度 [英] Having the floating children elements determine parent width

问题描述

以下是示例

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。

The container with the red background seem to always stretch to 100%. What I'd like to do is to make its width depend on the floating children, so in this case, 3 times 100px.

我想要的原因这是如下。在一个灵活的布局，我有一个容器，包含几个不同大小的子元素。这些孩子的宽度和数量可以有所不同。孩子们总是漂浮。目标是让浮动的孩子居中。所以，如果我总是有一个子元素，我只是设置其边缘 - 右边和左边缘为自动。然而，有几个孩子，我希望彼此相邻，但在他们被水平排序后，我想要该行在页面的中心。我不能给容器一个固定的宽度，因为孩子的数量和他们的每个宽度都没有预先确定。

The reason I'd like to have this is as follow. In a flexible layout, I have a container that contains several child elements of different sizes. The width and amount of those children can vary. The children always float. The goal is to have the floating children centered. So, if I always have one child element, I'd simply set its margin-right and margin-left to auto. However, there are several children which I wish to put next to each other, but after they have been ordered horizontally, I'd like that row to be centered on the page. I cannot give a fixed width to the container since the amount of children and each of their width are not determined in advance.

我想我可以这样做javascript，但我想知道是否有一个纯CSS解决方案。感谢

I think I might be able to do this with javascript, but I wonder if there is a pure css solution. Thanks

推荐答案

除了Adsy建议（将容器位置设为固定）外，还可以：

Besides Adsy suggestion (to set the container's position to fixed), you could:

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）在容器上设置一个float，如果您需要相对/静态定位：

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/

这篇关于使用浮动子元素确定父宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！