CSS在另一個位置的一個DIV是浮動：左

我有這樣的：CSS在另一個位置的一個DIV是浮動：左

<div class="listing-thumbnail"><a href="http://domain-name.com/thislisting/"><img 

class="wpbdmthumbs" src="http://domain-name.com/wp- 

content/uploads/2013/04/dancegroup-300x300.jpg" style="max-width: 300px;"/></a> 
</div> 

<div class="listing-details"> 

    <div class="field-value wpbdp-field-endmonth meta"><span 

class="value">March</span></div> 

    <div class="field-value wpbdp-field-enddaynumber meta"><span 

class="value">10</span></div> 

    <div class="field-value wpbdp-field-citystatezip meta"><span 

class="value">Northampton, Massachusetts 01060</span></div> 

</div>

它顯示是這樣的：

|圖片.... | 3月10日馬薩諸塞州北安普頓01060
| .............. |
| _______________ |

但我希望它能像這樣顯示：

| image .... | 3月10日
| .............. | Northampton，Massachusetts 01060
| _______________ |

動態地從WP數據庫條目中提取所有字段。

目前，CSS爲3月場和之前其他日期相關的領域，爲了讓他們排隊在同一行，就是這個樣子的每個字段：

#content .wpbdp-listing .wpbdp-field-endmonth .wpbdp-field-enddaynumber .value { float: left; }

我問題是，我可以申請什麼css來導致city-state-zip div，並且跟隨它的那些div從日期信息下面的下一行開始，而不是與日期信息相同的行上的？

請注意，city-state-zip div後面的字段表現很好，並且都從它們自己的行開始。

我添加了float:left以獲取日期字段全部在同一行而不是列中。

這些div都在另一個div內，還有更多。現在，我沒有爲日期元素添加剩餘的浮動日期，它們都在一個接一個地沿着頁面垂直排列，即。

在city-state-zip之後的div分別在新行上開始。我希望city-state-zip元素在一行上。

注意clear: left和clear: all沒有工作了，因爲是這些div左側的圖像，並將其推入低於城市DIV，如下：

|圖片.... | 3月10日
| .............. |
| _______________ |
北安普頓，馬薩諸塞州01060

來源

2013-04-22 Ericjt

很高興看到馬薩諸塞州的北安普頓。 – kkurian 2017-02-14 23:00:53

使用clear:both;類域值wpbdp場-citystatezip

來源

2013-04-22 04:17:50 Sweety

OP已經說過要清除顯示在圖像下方的文本的兩個結果，所以這不是一個選項。 – 2013-04-22 04:31:55

您可以使用顯示：塊包含城市/州/郵編的元素，使其開始一個新行。確保只有你的日期字段有一個浮點數：留在它們上面。如果city/state/zip有一個float：left和display：block，那麼它將盡可能地向左浮動，這將位於日期字段的右側。

爲什麼不能在包含日期和城市/州/郵編的div之間插入<br />？

來源

2013-04-22 04:31:01

CSS在另一個位置的一個DIV是浮動：左

回答

相關問題