DIV佈局對齊使用浮動或塊內右div

Question

我想對齊幾個div到這個結構，但沒有任何工作。

<div> 
    <div>top</div> 
    <div>middle 
      <div>left</div> <div>right</div> 
    </div> 
    <div>bottom</div> 
</div> 

伊夫使用花車與abosolutes，塊等試圖接近即時得到與塊直列但我需要對齊股利權只是坐在了靠近左格，ived沒有添加文本對齊正確喜悅。

非常感謝 d

Answer 1

給了left和right div的一個width，讓他們float

請確保您還用添加以下額外的div清除浮動：clear: both;

代碼：

<div id="wrap"> 
    <div id="top">top</div> 
    <div id="mid"> 
     <div id="left">left</div> 
     <div id="right">right</div> 
     <div class="clear"></div> 
    </div> 
    <div id="bot">bottom</div> 
</div>​ 

CSS：

div { 
    background: #ccc; 
    height: 15px; 
    margin-bottom: 10px; 
} 

.clear { 
    clear: both; 
} 

#wrap { 
    width: 400px; 
} 

#top { 

} 

#mid { 

} 

#left { 
    float: left; 
    width: 200px; 
} 

#right { 
    float: left; 
    width: 200px; 
} 

#bot { 

} 
​ 

看到在行動代碼：http://jsfiddle.net/GZg6y/

Answer 2

試試這個

<div> 
    <div>top</div> 
    <div> 
     <div style="float:left;">left</div> 
     <div style="float:left;">right</div> 
    </div> 
    <div style="clear:both;">bottom</div> 
</div> 

底部DIV明確：既可能是不夠的，但做的伎倆在這個特殊的例子

google clearfix爲此

Answer 3

你可以在不同的wa做這個YS，一個通過浮動CSS屬性，請確保您指定的寬度在這個例子：

<div class="container"> 
<div class="top">top</div> 
<div class="middle"> 
    <div class="left">left</div> <div class="right">right</div> 
</div> 
<div class="bottom">bottom</div> 

和你的CSS應該是這樣的：

.left{ 
float:left; 
width:50%; 
background:green; 
} 
.right{ 
float:right; 
width:50%; 
background:blue; 
} 
.bottom{ 
clear:both; 
}​ 

在這裏看到http://jsfiddle.net/M3met/1/