html - 是否可以使用纯 css 调整父 div 的大小以适应内联 block 空白 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/

---

如果你希望它在有空间时仍然保持 100% 宽度，你可以添加 min-width:100% 到它

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

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