是否有可能与纯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/

---

如果你希望它仍然可以保持100％的宽度时，有房，你可以添加min-width:100%它

.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

试试这个：

在CSS .box_holder

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

取出white-space:nowrap;或添加display:inline-block;上.box_holder

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