浮動元素，文本元素運行在多行之後日期

我有問題，將日期在本例中右後面的文本浮動元素，文本元素運行在多行之後日期

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

我wan't藍色日期遵循正確的在文字之後，不管行數是多少

來源

2012-08-01 Plexus81

你想實現[這種效果]（http://jsfiddle.net/HpC9p/6/）？否則，如果你想在實際文本後面直接使用它，請執行[第7提到的]（http://stackoverflow.com/a/11758977/1139697）。 – Zeta 2012-08-01 12:16:51

在這種情況下，你可以閱讀我的答案，它會工作... – rafaelbiten 2012-08-01 12:23:52

@ 7th對不起，我的壞！有浮動日期的跨度：正確。謝謝！ – Plexus81 2012-08-01 12:26:58

爲什麼不把你的「日期」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; 
}

來源

2012-08-01 12:15:02 rafaelbiten

您還必須刪除日期div的浮動。由於它將表現爲「內聯」元素，因此您無需再將其浮動。編輯：你去！ – rafaelbiten 2012-08-01 12:27:04

你是錯誤的元素上設置float: left;，爲.date應該出現在.text權，而不是.header的權利。

因此，.text需要一個float: left;，並且還指定寬度爲日期留出一些空間。

請參見：http://jsfiddle.net/HpC9p/8/

來源

2012-08-01 12:20:21 feeela

感謝您的示例，但我希望日期顯示在文本區域上沒有「寬度」的文本之後 – Plexus81 2012-08-01 12:24:59

浮動元素，文本元素運行在多行之後日期

回答

相關問題