css - CSS Floats 没有按计划进行

Question

所以我对 css 和 html 都很陌生，但这不是我第一次使用浮动来实现 2 个彼此相邻的 div。这次它不能正常工作，我已经修补了大约 3 个小时，我想我应该寻求帮助。

我在 jsFiddle 中编辑了我的网站部分，以帮助描述我的问题：

http://jsfiddle.net/9QRcP/10/

Answer 1

问题不在于您没有将divs 分配给float: right，而是您div的 s 足够小，可以在页面宽度内容纳多个，因此他们正在做他们应该做的事情。

但是，为了解决这个问题，我们将添加clear:right到#about_sideand #about_side_footer，但这不会强制它们为 level，因此它并不能完全解决问题。

为了解决这个问题，而不是分别浮动你#greeting_wrapper和#about_wrapper左右的每个单独的部分，而是浮动包装器左右。

#greeting_wrapper {
  float: left;
}

#about_wrapper {
  float: right;
}

#greeting_header, #greeting, #greeting_footer, #about_side_header, #about_side, #about_side_footer {
  float: none;
}

Answer 2

我发现你需要浮动#greeting_wrapper和#about_wrapper. 这些包装器是重要的元素。据我所知，这些divs 的孩子也不需要浮动。

目前，这些divs 正在采用 960px 的主体宽度，因此迫使两个divs 进入新行。

Answer 3

我对你的代码有兴趣：http: //jsfiddle.net/9QRcP/15/

我没有费心纠正对齐方式，但左边现在在左边，右边现在在右边。

我自己承认，这不是一个很好的方法。几点建议：

1. 您可以使用'clear：left'强制左侧的元素移动到新行http://www.w3schools.com/cssref/pr_class_clear.asp
2. 您可能应该将左右元素包含在 2 个单独的容器中（例如 class="container left" 和 class="container-right" ）。为左容器中要移动到下一个垂直级别的任何子元素清除 left，对于右容器中的元素也是如此。这将使您可以轻松地将页面分成几列。这是我之前从http://www.quirksmode.org/css/clearing.html准备的http://jsfiddle.net/9QRcP/19/
3. 您可能可以通过使用网格系统为自己节省大量工作，例如http://960.gs/

Answer 4

问题在于包装器的宽度。如果你增加宽度，浮动的 div 将在右侧占据它的位置。