Question

我的JsFiddle上的div正好排成一列，但他们没有在website上工作。

我认为问题源于我的联系表格，因为当我将联系表格移到两个div之下时，他们的阵容正确。

有什么建议吗？

Answer 1

您无法清除<div class="form">元素中的浮点数。

针对您的问题的两个好方法是将overflow: hidden添加到.form或将clear: both添加到#text。

Answer 2

它适用于jsFiddle，因为它们重置了CSS：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
   margin: 0;
   padding: 0;
}

在你的情况下，这是因为h2的高度比线的其他部分高。这导致你的蓝色div在h2结束时开始。

应该这样做：

.form h2 {
  font-size: 26px;
  font-weight: 200;
  text-shadow: 1px 1px 1px #CFCFCF;
  color: #999;
  float: left;
  padding-left: 20px;
  margin: 20px 0;
}

PS：@Wex的答案更清晰;）

为什么我的div不排队？

2 个答案: