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

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>

.content {
 display: block
}

.header, .tt {
 float: left;
}

 .header { 
 width: 100%;            
 }

.text {
 background: red;     
}

.date {
   background: blue;            
 }

请看例子:

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

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

Answer 1

为什么不将“日期”div 移到“文本”类中并移除它的 float 并将其设置为“显示:内联”？简单多了!

这就是你将拥有的:

<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;
}