如何阻止我的DIVS包装

Question

我遇到了很大的麻烦，试图让我的CSS样式正常工作。

我有以下几点：

http://jsfiddle.net/JasonMHirst/PsBfc/

<div id="maingrid" style="overflow:auto"> 
    <div id="fieldheaders"></div> 
    <div id="colDetailsGroup" class="col" style="float:left;"> 
     <div class="groupHeader grabhandle" style="text-align:center;">Details</div> 
     <div id="col_CA1Details" class="columnHeader CA1">CA1</div> 
     <div id="col_OWNDetails" class="columnHeader OWN">OWN</div> 
     <div id="col_CTYDetails" class="columnHeader CTY">CTY</div> 
     <div id="col_QUADetails" class="columnHeader QUA">QUA</div> 
    </div> 
    <div id="colVOLGroup" class="col" style="float:left;"> 
     <div class="groupHeader grabhandle" style="text-align:center;">Volume(s)</div> 
     <div id="col_vol2007" class="columnHeader value">vol2007</div> 
     <div id="col_vol2008" class="columnHeader value">vol2008</div> 
     <div id="col_vol2009" class="columnHeader value">vol2009</div> 
     <div id="col_vol2010" class="columnHeader value">vol2010</div> 
     <div id="col_vol2011" class="columnHeader value">vol2011</div> 
    </div> 
    <div style="clear:both"></div> 
    <div id="main2" style="border:1px solid red;"></div> 
</div> 

我想要做的是，当外层div（#maingrid）变得比列的宽度更小，内#fieldheaders的div是没有被包裹，而是留在原来的位置，#maingrid的滚动条生效。

有人能向我解释，需要什么样的规则来阻止每一个<div/>内#colDetailsGroup这是内#fieldheaders从包装时#maingrid变得太小。

Answer 1

您可以通过使用display: inline-block而不是将.col浮动来实现此目的。你需要从.col的div

<div id="colDetailsGroup" class="col"><!-- ... --></div> 
<div id="colVOLGroup" class="col"><!-- ... --></div> 

删除内联风格float: left和改变你的CSS来：

#maingrid { 
    border:1px solid black; 
    height:200px; 
    width:200px; 
    font-size: 0; /* to prevent white space */ 
    white-space: nowrap; /* to prevent line break */ 
} 

.col { 
    display: inline-block; 
} 

Here is a demo。