双列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; 
}