css - 浮动元素，跨越多行的文本元素，后跟日期

Question

我在将示例中的日期放在文本后面时遇到问题

<div class="content">
<div class="header">
    <div class="text">asfd asdf sa f dsafas asfd gfds gds g fdsgfds gdsf fds  s gfds fds g fds ggsfd dsfgfds fds fds fds ds  ds dgsd fgfs g a sf faa a DATE right after this --> </div>
    <div class="date">12/12/12</div>
</div>
<div class="tt">asdf asd fdsa fdsa sad fdsas  fa fa f fda fda</div>

​</p>

.content {
 display: block
}

.header, .tt {
 float: left;
}

 .header { 
 width: 100%;            
 }

.text {
 background: red;     
}

.date {
   background: blue;            
 }

请看例子：

http://jsfiddle.net/HpC9p/5/

无论行数如何，我都不想在文本之后紧跟蓝色日期

Answer 1

为什么不将“日期” div 移动到“文本”类中并删除它的浮动并将其设置为“显示：内联”？这容易多了！

这就是你将拥有的：

<div class="text">
    asfd asdf sa f dsafas asfd gfds gds g fdsgfds gdsf fds  s gfds fds g fds ggsfd dsfgfds fds fds fds ds  ds dgsd fgfs g a sf faa a DATE right after this -->
    <div class="date">12/12/12</div>
</div>

对于 CSS：

.date {
   background: blue;
   display: inline;
}

Answer 2

您float: left;在错误的元素上设置了 ，因为.date应该出现在 的右侧.text，而不是 . 的右侧.header。

所以.text需要一个float: left;和一个指定的宽度来为日期留出一些空间。

见：http: //jsfiddle.net/HpC9p/8/