html - 如何阻止我的 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 而不是 float .col 来实现这一点。您需要从 .col div

中删除内联样式 float: left

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

并将您的 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 .