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

为什么不在“text”类中移动“date”div并将其移除并将其设置为“display：inline”？这太容易了！

这就是你所拥有的：

<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/

浮动元素，运行在多行上的文本元素，后跟日期

2 个答案: