二重列の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 class="obj">に変更してください。

脇に、.obj_containerに浮動小数点数を含めると、clear: bothは必要なものではありません。それをoverflow: hiddenと交換するか、clearfixを使用してください。

Answer 2

は、これはあなたが<div id="obj">を使用したが、その後.objいる

.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; 
}