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

回答

相關問題