Question

如果我删除“菜单”div代码，下面的代码会呈现不同的布局：左侧文本框在Firefox 3.6.13和IE 8.0中显示更多左侧。

<div id="whole" style="width:800px;">
    <div id="menu" style="display:inline; width:800px;">
        <select name="select" id="c" style="display:inline; float: left; width:200px;" >
            <option value="alpha" selected="selected">alpha</option>
            <option value="omega">omega</option>
        </select>
    </div>
    <br>
    <div id="twoTextBox" style="display:inline; width:800px;">
        <div id="frame1" style="display:inline; float: left; width:250px;">
            <textarea rows="8" cols="20"  style="display:inline; float: left; width: 250px;"></textarea>
        </div>

        <div id="frame2" style="display:inline; float: right; width:250px;">
            <textarea rows="8" cols="20"  style="display:inline; float: right;  width: 250px;"></textarea>
        </div>
    </div>
</div>

为什么“菜单”div css会干扰以下div css？

Answer 1

你有3个div，2个浮动，1个浮动正确。当你移除最左边的div时，中间的一个漂浮在左边以占据空位。

如果这就是你的意思，它就能正常工作。

Answer 2

从float:left;中移除select，并且在所有浏览器中都是相同的。同时为overflow:auto添加#whole以清除浮点数，并尝试避免使用内联样式。

演示： http://jsfiddle.net/vFaRR/2/

div css布局看起来不同，取决于之前的div

2 个答案: