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

如果我删除“菜单”div代码，下面的代码呈现不同的布局：左边的文本框在Firefox 3.6.13和IE 8.0中显示更多。div css布局看起来不同，取决于以前的div

<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？

来源

2011-02-26 tucson

以何种方式，你的意思是...干扰子元素继承其各自父母的某些特性。这可能与你的问题有关，如果一个孩子elem继承了你不打算在 – 2011-02-26 18:28:08

中使用的属性，并且在你移除'＃menu'时有什么不同，因为在Firefox中，删除不会影响其他元素。 – Sotiris 2011-02-26 18:29:00

@Sotiris我更新了问题。我在IE和Firefox中获得了不同的显示效果。如果我删除了“菜单”，则左边的文本框会出现在左边空白处。 – tucson 2011-02-26 18:32:30

从select中删除float:left;，并且在所有浏览器中都是相同的。还要为#whole添加overflow:auto以清除浮动内容，并尽量避免内联样式。

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

来源

2011-02-26 18:36:51 Sotiris

你有3个div，2个左边的浮动，1个右边浮动。当您移除最左侧的div时，中间的左侧浮起来占据空位。

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

来源

2011-02-26 18:33:41

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

回答

相关问题