子元素浮動div文本中的文本

不知道我錯過了什麼，但在這裏ti去了：我有一個浮動的左div與一個絕對定位到底部的子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/ 如何從突破到下一行保持文本里面？

來源

2012-02-16 zero

3個答案都在說什麼我正在寫，http://jsfiddle.net/rz5Q8/1/有更新以顯示 – Dampsquid 2012-02-16 14:30:14

浮動元素需要指定的寬度。確切地說，「imgDes」的寬度爲零。給它一個寬度，一切都會好起來的。

把邊界上的元素，就是看發生了什麼事情的好辦法：

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

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

}

來源

2012-02-16 14:27:43

人我覺得像一個假人，不敢相信我錯過了這個。謝謝 – zero 2012-02-16 14:42:39

添加邊框顯而易見。這是調試CSS的第一步。 – 2012-02-16 14:51:10

實際上，我知道寬度的事情，我通常做調試CSS的背景顏色，但對每個有自己的:) – zero 2012-02-16 16:44:09

如果你給.imgDes的寬度，將工作：width: 100%;

一種方法來調試此類問題是給容器和元素在不同顏色的邊界內（例如石灰和紅色） - 正如你在這個例子中看到的那樣，文本「this」的長度默認情況下給出了該文本寬度的出現（真的是a父容器的寬度爲0）。

來源

2012-02-16 14:28:16

你需要指定父元素上width：

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

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

來源

2012-02-16 14:28:48

子元素浮動div文本中的文本

回答

相關問題