让浮动的子元素决定父元素的宽度[英] 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%.我想做的是使其宽度取决于浮动的孩子,因此在这种情况下,100px.

我想拥有的原因如下.在灵活的布局中,我有一个容器,其中包含几个不同尺寸的子元素.这些孩子的宽度和数量可能会有所不同.孩子们总是漂浮.目标是使浮动的孩子以中心为中心.因此,如果我总是有一个子元素,我将简单地将其权利右翼和边缘左翼设置为自动.但是,我希望有几个孩子彼此相邻,但是在水平订购之后,我希望将该行集中在页面上.我不能给容器的固定宽度,因为未提前确定儿童和每个宽度的宽度.

我认为我可以使用JavaScript执行此操作,但是我想知道是否有纯CSS解决方案.谢谢

推荐答案

除了广告建议(将容器的位置设置为固定)外,您可以:

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/

其他推荐答案

通过将您的容器 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/

其他推荐答案

在这里派对晚了,但是您真正需要的只是添加display: inline-block.并以.container div为中心,只需将text-align: center应用于任何包含的 it .

jsfiddle: http://jsfiddle.net/lwxhe/24/

本文地址:https://www.itbaoku.cn/post/565130.html