Question

如果我希望div的宽度与其内容一样宽，如何设置div的宽度。但是，我的DIV中有很多孩子不可避免地崩溃，因为他们占用的水平空间比div允许的多。

我有这个CSS：

    .outer{
        width: 100%;
        background-color: green;
    }

    .inner{
        width: auto;
        display: inline-block;
        margin: 0 auto;
        background-color: red;
    }

    .row{
        float: left;
        width: 250px;
        background-color: blue;
        display: inline-block;
    }

这是我的HTML：

<div class="outer">
    <div class="inner">
        <div class="row">asd1</div>
        <div class="row">asd2</div>
        <div class="row">asd3</div>
        <div class="row">asd4</div>
    </div>
    <div class="clear"></div>
</div>

这是我的jsfiddle：http://jsfiddle.net/vullnetyy/pshao68g/

我想在这里做的是：

红色div必须与第一行中的3个蓝色div一样宽
红色div必须在绿色div中居中
必须避免使用javascript
没有静态宽度可以设置为红色或绿色div（因为这应该是响应的，并且可以提供任意数量的蓝色div）。

Answer 1

首先，如果你想要一个元素居中，你需要做到：

display: block;
width : %/px;
margin-left: auto;
margin-right:auto;

如果你想让3个蓝色div在红色div中并且正好是3个蓝色= 1red宽度，则给每个蓝色33.333％宽度。

例如：https://jsfiddle.net/vullnetyy/pshao68g/

Answer 2

这里有两个相互矛盾的问题。

1）你必须有一个设定的宽度才能做左边/右边边距自动。

2）如果你浮动试图匹配子宽度你不能自动保证金。现在我知道你没有把浮子留在内心。但是你确实做了显示：内联块已经浮动并附加了一些其他规则。

在这种特殊情况下，你必须妥协一点才能得到你想要的结果。只需将.inner设置为与行250px相同，因为我们知道子项的大小，并删除display：inline-block和PRESTO！

尝试这一点到你的内心，看看会发生什么。

.inner{
        width: 250px;
        margin: 0 auto;
        background-color: red;
    }

如何设置DIV的宽度以匹配其内容

2 个答案: