CSS将一个div定位在另一个浮动的div下：left答案

【问题标题】：CSS to position one div under another that is float: leftCSS将一个div定位在另一个浮动的div下：left
【发布时间】：2013-04-22 04:14:46
【问题描述】：

我有这个：

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

【问题讨论】：

很高兴看到马萨诸塞州北安普顿市出现在 SO 上。

标签： css html floating

【解决方案1】：

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

【讨论】：

OP 已经说过清除这两个结果会导致文本显示在图像下方，所以这不是一个选项。

【解决方案2】：

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

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

【讨论】：