CSS浮动没有按计划进行

Question

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

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

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

Answer 1

问题不在于您没有将div分配给float: right，而是您的div足够小，以至于您可以在页面中放置多个#about_side宽度，所以他们正在做他们应该做的事情。

要解决此问题，we would add clear:right到#about_side_footer和#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; } 分别左右浮动float the wrappers left and right instead。

{{1}}

Answer 2

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

目前，那些div正在占据身体宽度960px，从而迫使div进入新线。

Answer 3

我的代码很小：http://jsfiddle.net/9QRcP/15/

我没有打扰纠正对齐，但现在左边和右边现在在右边。

我个人认为这不是一个很好的方法。一些指示：

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

Answer 4

问题在于包装器的宽度。如果增加宽度，浮动的div将取代右侧。