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数据库条目中动态提取的。

目前，3月字段的css和其他日期相关的字段，为了让它们在同一行上排列，对于每个字段都是这样的：

#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

Answer 1

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

Answer 2

您可以在包含city / state / zip的元素上使用display：block，以使其开始换行。确保只有你的日期字段有一个浮点数：左边。如果city / state / zip有一个float：left以及display：block，那么它将尽可能向左浮动，这将位于日期字段的右侧。

为什么不能在包含日期和城市/州/邮政编码的div之间添加<br />？

CSS将一个div放在另一个div下面，即float：left

2 个答案: