Question

<div style="float:left">

    <div class="designerWrapper">   
        <div class="pageBox">

            content

        </div>            
    </div>

</div>
<div style="float:left; margin-left:10px;">

    content 2

</div>
<div style="clear:both"></div>            
<br /><br />

如何使包含内容2的div 100％宽度？如果我将其设置为100％宽度，则它太宽，此时它会随着内容的长度而扩展。

Answer 1

你应该使用表格的东西

<div id="outer1">
<div id="outer2">
    <div id="left"></div>
    <div id="right"></div>
</div>
</div>

的CSS：

#outer1 {display:table;width:600px;height:30px;}
#outer2 {display:table-row;width:600px;height:30px;}
#left {display:table-cell; width:15px;}
#right {display:table-cell; width:auto;}

重要的是没有漂浮！因为表格显示会自动浮动单元格。我没有测试希望的代码。

Answer 2

您可以根据您的要求设置最小宽度。稍后它将扩展其内容

<div style="float:left; margin-left:10px;min-width:110px;">

    content 2

</div>

CSS浮动div中的100％宽度

2 个答案: