防止div元素從流體中的導航結束語

Question

• 我有一個跨頁
• 內延伸的是頂部導航頂部導航我有各種元素
  • 兩塊必須左對齊
  • 一個必須右對齊
• 資產淨值是流體元件固定寬度
• 不想元素來包裝瀏覽器時風流量最小
• 需要IE6上工作了由於高中國觀衆。

在這裏看到的例子： http://jsfiddle.net/4SUwg/

<div id="header"> 
    <div id="headerContent"> 
    <div class="search-list"> Search List </div> 
    <div class="social-buttons"> Social </div> 
    <div class="signin"> Login Drop Down </div> 
    </div> 
</div> 

我想的資產淨值中的div元素，以不換。我在堆棧上搜索，可以找到接近的答案，但沒有完全解決這個問題。我需要將div元素對齊使事情複雜化。必須適用於所有瀏覽器，尤其是IE瀏覽器。

感謝所有您的幫助提前！

Answer 1

我發現了一個適用於所有瀏覽器的解決方案，尤其是IE6以上，因爲這是該項目的需求。如果你有更好的事情完成相同的事情，請發佈！我衷心感謝所有回答/幫助過的人。

<div id="header2"> 
    <table id="headerContent2"> 
     <tr> 
      <td id="left" valign="top"> 
       <div id="leftWrapper"> 
       <div class="search-list2">Search List</div> 
       <div class="social-buttons2">Social Buttons</div> 
       </div> 
      </td> 
      <td id="middle">&nbsp;</td> 
      <td id="right" valign="top"> 
       <div class="signin2">Login Drop Down</div> 
      </td> 
     </tr> 
    </table> 
</div> 


<style> 
#header2 { 
background: #404040; 
height: 35px; 
color: white; 
margin: 0 0 12px 0; 
} 

#headerContent2 { 
width:100%; 
} 

#headerContent2 td { 
height: 32px; 
padding:0; 
margin:0; 
} 

.search-list2 { 
width:150px; 
float:left; 
background:#039; 
} 

.social-buttons2 { 
width:200px; 
float:left; 
background:#060; 
} 

.signin2 { 
background:#F00; 
float:right; 
width:400px; 
} 

#leftWrapper { 
width:400px;  
} 

#middle { 
width:100%; 
} 
</style> 

請參閱演示它在這裏工作。複製代碼並在所有IE中嘗試它，因爲JSfiddle在所有IE中都不起作用。 http://jsfiddle.net/GtXKE/

Answer 2

使用SPAN ..它INLINE並不能阻止？

<div id="header"> 
    <div id="headerContent"> 
    <span class="search-list"> Search List </span> 
    <span class="social-buttons"> Social </span> 
    <span class="signin"> Login Drop Down </span> 
    </div> 
</div> 

而且你的CSS，去掉浮

<style> 
body { 
margin:0; 
padding:0; 
} 

#header { 
background: #404040; 
height: 35px; 
color: white; 
margin: 0 0 12px 0; 
overflow-x:auto; overflow-y:hidden; 
} 

#headerContent { 
height: 32px; 
border:1px dashed #fff; 
} 

.search-list { 
width:150px; 

background:#039; 
} 

.social-buttons { 
width:150px; 

background:#060; 
} 

.signin { 
width:200px; 

background:#F00; 
} 

Answer 3

你想要一個流體佈局，但流動佈局中最重要的原則是，不要設置元素的明確的寬度，但已設置的寬度。

的CSS有<style>標籤，這不是必需的，可能你把它誤。

我已經在百分比值設置的div的寬度內headerContent。該CSS是

body { 
margin:0; 
padding:0; 
} 

#header { 
background: #404040; 
height: 35px; 
color: white; 
margin: 0 0 12px 0; 
overflow-x:auto; overflow-y:hidden; 
} 

#headerContent { 
height: 32px; 
border:1px dashed #fff; 
} 

.search-list { 
width:28%; 
float:left; 
background:#039; 
} 

.social-buttons { 
width:28%; 
float:left; 
background:#060; 
} 

.signin { 
width:28%; 
float:right; 
background:#F00; 
} 

只是改變了寬度值，並在我的瀏覽器，它看起來很好，之前的版本好過。這裏是一個小提琴http://jsfiddle.net/DeepakKamat/s52Hn/8/