フローティングdiv内の子要素のテキストが壊れています

Question

私は行方不明を知りませんが、ここにti go'sがあります： 私は浮動小数点のdivと絶対に下に配置された浮動小数点divを持っていますが、休憩二回：

<div class="imgDes"><p class="toBot">this is a test</p></div>​ 

CSS

.imgDes { 
float:left; 
position:relative; 
height: 100px; 

} 

.toBot { 
    position: absolute; 
    bottom: 0px; 

}​ 

ここではアクションである：http://jsfiddle.net/rz5Q8/ は、どのように私は次の行に破壊から内のテキストを保つことができますか？

Answer 1

フローティングエレメントには、指定された幅が必要です。 Curently "imgDes"の幅はゼロです。それに幅をつけて、すべてがうまくいくでしょう。あなたの要素に境界線を置く

は何が起こっているのかを確認する良い方法です：

.imgDes { 
    float:left; 
    position:relative; 
    height: 100px; 
    width:300px; 
    border:1px solid #000000 
} 

.toBot { 
    position: absolute; 
    bottom: 0px; 
    border:1px solid #ff0000 

} 

Answer 2

あなたは.imgDesにそれが動作する幅を与える場合：このタイプの問題をデバッグするwidth: 100%;

一つの方法コンテナと要素を異なる色（例えば石灰と赤）の枠の内側に与えることです - この例で見るように、 "this"というテキストの長さは、デフォルトでそのテキストの幅を示しています親コンテナの幅0）。あなたは親要素にwidthを指定する必要が

Answer 3

：すべて私が書いたものを言って

.imgDes { 
    float: left; 
    position: relative; 
    height: 100px; 
    width: 200px; 
} 

.toBot { 
    position: absolute; 
    bottom: 0; 
}​