Question

我在尝试使CSS样式正常工作时遇到了很多麻烦。

我有以下内容：

<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内的{{1}}所需的规则。

Answer 1

您可以使用display: inline-block而非浮动.col来实现此目的。您需要从float: left divs

中删除内联样式.col

<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

如何阻止我的DIVS包装

1 个答案: