如何使这些浮动的 div 正确包装？答案

【问题标题】：How can I make these floated divs wrap properly?如何使这些浮动的 div 正确包装？
【发布时间】：2014-05-12 08:54:46
【问题描述】：

我正在尝试编写一些 CSS 来使 Drupal 节点编辑表单看起来更好看。基本上我希望表单元素都向左浮动。目前我只是将一些简单的 CSS 应用于表单元素 ID：

.node-complaint-form .form-item-title,
.node-complaint-form #edit-field-date-of-complaint,
.node-complaint-form #edit-field-mfaa-class, 
.node-complaint-form #edit-field-loan-writer-staff-member,
.node-complaint-form #edit-field-product-of-service-provide,
.node-complaint-form #edit-field-date-of-events-leading-to- {
    float: left;
    width: 240px;
    margin: 0 20px 0 0;
}

在调整浏览器窗口大小之前，这看起来很好，此时会发生这种情况：

您可以看到“提供的服务产品”和“导致投诉的事件日期”以一种奇怪的方式出现。我希望他们一直向左走，但我不知道他们为什么不这样做。

这是我正在努力实现的JSFiddle。您可以看到，当您调整包含字段的窗口大小时，它们都正确地彼此相邻。

如何在 Drupal 中仅使用（最好）CSS 来实现这一点。

【问题讨论】：

在您的小提琴中，所有浮动框的高度都相同。如果你在现场给你的盒子一个高度，我敢打赌它会很好地包裹起来；）
将其发布为答案，我会接受。

标签： css drupal drupal-7

【解决方案1】：

要在纯 css 中实现这一点，这里有两个选项。

1 正如@xec 在 cmets 中提到的，为所有元素分配任意公共高度

2 由于您已经建立了固定宽度，您可以结合使用媒体查询和 nth-child 选择器来为各种宽度指定清除模式。例如：

@media (max-width: 680px) {
  label:nth-child(3n) { clear: left; }
}

http://jsfiddle.net/H3y8j/48/

【讨论】：

我不会赞成这个，主要是因为你有正好 6k 点。
别担心 - 我会去其他地方为自己赢得一些反对票来补偿。
我相信你的话。我现在投了赞成票，并希望你在其他地方行为不端；）