5

我有这个：

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

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

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

我的问题是，我可以应用什么 css 来导致city-state-zipdiv 以及跟随它的那些，从日期信息下方的下一行开始，而不是与日期信息在同一行？

请注意，city-state-zipdiv 后面的字段表现良好，并且都从自己的行开始。

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

这些 div 都在另一个 div 中，还有更多。照原样，没有我为日期元素添加的浮动，它们都在页面垂直向下排列，一个接一个。

每个跟随的 divcity-state-zip都从新行开始。我想要city-state-zip一行中的元素。

请注意，clear: left并clear: all没有成功，因为这些 div 的左侧有一个图像，它将城市 div 推到下面，如下所示：

|图像....| 3 月 10 日
|..................|
|_______________|
马萨诸塞州北安普敦 01060

4

2 回答 2

7

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

于 2013-04-22T04:17:50.027 回答
1

您可以在包含 city/state/zip 的元素上使用 display: block 以使其开始新行。确保只有您的日期字段有一个 float: left 。如果 city/state/zip 有一个 float: left 和 display: 块，那么它会尽可能地向左浮动，也就是日期字段的右侧。

为什么不能<br />在包含日期的 div 和城市/州/邮编之间放置一个？

于 2013-04-22T04:31:01.237 回答