如何使这些浮动的div正确包裹？

Question

我试图编写一些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;
}

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

您可以看到＆＃34;提供服务的产品＆＃34;和＆＃34;导致投诉的事件发生日期＆＃34;已经以一种奇怪的方式缠绕着。我希望他们一直走到左边，但我无法弄清楚他们为什么不这么做。

这是我想要实现的JSFiddle。您可以看到当您使用其中的字段调整窗口大小时，它们都会正确地彼此相邻。

如何在Drupal中使用（最好）只使用CSS。

Answer 1

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

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

2由于您已经建立了固定宽度，因此可以使用媒体查询和第n个子选择器的组合来指定各种宽度的清除模式。例如：

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

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