雙列css佈局不覆蓋對方底部空間

Question

嗨，我想做一個簡單的2列布局（它實際上是一個錶轉換），並有一個問題。 HTML：

<div class="obj_container" style="margin-top: 120px;"> 
     <div class="obj_title"> 
     Title: 
     </div> 
     <div id="obj"> 
     Bla Bla Bla<br /> 
     Bla Bla Bla<br /> 
     Bla Bla Bla<br /> 
     Bla Bla Bla<br /> 
     Bla Bla Bla<br /> 
     </div> 
</div> 

CSS：

.obj_container { 
    width: 900px; 
    height: auto; 
    clear: both; 
    float: left; 
} 

.obj_title { 
    width: 60px; 
    height: auto; 
    float: left; 
} 

.obj { 
    width: 820px; 
    height: auto; 
    padding: 10px; 
    float: left; 
} 

的問題是，當裏面的文字超過1線它將即使我指定了兩個div的寬度去下;一個解決方案可能是指定divs的高度，但不會動態適應內容。 感謝

Answer 1

您使用<div id="obj">，但隨後.obj。

更改爲使用<div class="obj">。

順便說一句，您試圖在.obj_container中包含浮點數，所以clear: both不是您所需要的。將其替換爲overflow: hidden，或使用clearfix。

Answer 2

這應該是

.obj_container { 
    width: 900px; 
    height: auto; 
    overflow: hidden; 
} 

Answer 3

<div class="obj_container" style="margin-top: 120px;"> 
     <div class="obj_title"> 
     Title: 
     </div> 
     <div id="obj"> 
     Bla Bla Bla<br /> 
     Bla Bla Bla<br /> 
     Bla Bla Bla<br /> 
     Bla Bla Bla<br /> 
     Bla Bla Bla<br /> 
     </div> 
<div class="clear"></div> 
</div> 

.clear { 
    clear: both; 
} 
.obj_container { 
    width: 900px; 
    height: auto; 
    overflow: hidden; 
} 

.obj_title { 
    width: 60px; 
    height: auto; 
    float: left; 
} 

.obj { 
    width: 820px; 
    height: auto; 
    padding: 10px; 
    float: left; 
}