0

我在尝试让我的 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) 变得小于列的宽度时，内部的 div#fieldheaders不会被包裹，而是保持在它们所在的位置并且滚动条#maingrid生效。

有人可以向我解释需要什么规则来阻止其中的每一个<div/>在包装变得太小时。#colDetailsGroup#fieldheaders#maingrid

4

1 回答 1

1

您可以通过使用display: inline-block而不是浮动.cols 来实现这一点。您需要float: left从.coldiv中删除内联样式

<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;
}

这是一个演示。

于 2013-05-27T20:09:16.610 回答