2012-02-16 16 views
0

私は行方不明を知りませんが、ここにti go'sがあります: 私は浮動小数点のdivと絶対に下に配置された浮動小数点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/ は、どのように私は次の行に破壊から内のテキストを保つことができますか?

+1

3の答え、http://jsfiddle.net/rz5Q8/1/は私が感じる – Dampsquid

答えて

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 

} 
+0

男を表示するアップデートを持っていますダミーのように、私はこれを逃したとは信じられません。ありがとうございました – zero

+0

ボーダーを追加することは明らかです。これは、CSSのデバッグの最初の一歩です。 –

+0

実際に私は幅のことを教えて、私は通常CSSのデバッグのための背景色を行うが、それぞれの自分自身に:) – zero

1

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

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

1

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

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

.toBot { 
    position: absolute; 
    bottom: 0; 
}​ 
関連する問題