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

Question

如果我希望 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/

我想在这里做的是:

1. 红色 div 必须与其第一行中的 3 个蓝色 div 一样宽
2. 红色 div 必须在绿色 div 内居中
3. 必须避免使用 javascript
4. 不能为红色或绿色 div 设置静态宽度(因为这应该是响应式的，并且可以提供任意数量的蓝色 div)

Answer 1

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

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

如果您希望 3 个蓝色 div 位于红色 div 的内部并且正好是 3 蓝色 = 1 红色宽度，请为每个蓝色指定 33.333% 的宽度。

例如在这个例子中:https://jsfiddle.net/vullnetyy/pshao68g/