Question

不确定我错过了什么，但是这里就去了：我有一个漂浮的左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/ 如何保持文本内部不会破坏到下一行？

Answer 1

浮动元素需要指定的宽度。当然，“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）。

Answer 3

您需要在父元素上指定width：

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

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

子元素文本在浮动div中断

3 个答案: