CSS 将一个 div 定位在另一个 float : left 下

Question

我有这个:

<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
|................|
|________________|

但我希望它像这样显示:

|图片....| 3 月 10 日
|................|马萨诸塞州北安普顿 01060
|________________|

所有字段都是从 WP 数据库条目中动态提取的。

目前，March 字段和它之前的其他日期相关字段的 css，为了让它们排在同一行，每个字段都是这样的:

#content .wpbdp-listing .wpbdp-field-endmonth .wpbdp-field-enddaynumber .value {
向左飘浮;
}

我的问题是，我可以应用什么 css 来使 city-state-zip 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

Answer 1

在类字段值 wpbdp-field-citystatezip 中使用 clear:both;