html - 是否可以使用纯 css 使父 div 调整大小以适应内联块空白 nowrap 内容

Question

当故意阻止内容包装时，我正在尝试确定是否有办法让父 div 调整大小以适应内容。作为一个例子，这里是一个 jsfiddle jsfiddle.net/wtQfV来说明我的问题。

示例代码：

HTML

<div class="box_holder">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS

.box_holder{
    border:1px solid red;
    white-space:nowrap;
}

.clearfix{
    clear:both;
}

.box{
    width:30px;
    height:20px;
    margin:10px;
    background-color:red;
    display:inline-block;
}

是否有任何解决方法或者我应该接受我正在追逐彩虹并且我需要一个 javascript 解决方案。

Answer 1

您也可以使.box_holder元素成为inline-block..

.box_holder{
    border:1px solid red;
    display:inline-block;
    white-space:nowrap;
}

演示在http://jsfiddle.net/gaby/wtQfV/5/

---

And if you want it to still maintain 100% width when there is room, you can add min-width:100% to it

.box_holder{
    border:1px solid red;
    display:inline-block;
    min-width:100%;
    white-space:nowrap;
}

Demo at http://jsfiddle.net/gaby/wtQfV/7/

Answer 2

试试这个：

删除white-space:nowrap;css中的.box_holder

http://jsfiddle.net/wtQfV/4/

或 display:inline-block;添加.box_holder

http://jsfiddle.net/wtQfV/6/