在css中使用float

Question

  

可能重复：
  html and css syntax

我正在尝试制作一个3列的页面

这是CSS：

#left {
float: left;
width: 150 px;
background-color: blue;
height: 400px;
}

#center {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 600 px;
background-color: yellow;
height: 400px;
clear: none;
}

#right {
float: right;
width: 150px;
background-color: red;
height: 400px;
}

当我在浏览器中查看html文件时，右列只是在左栏下方，我做错了什么？

Answer 1

通常你没有足够的宽度。检查您的身体宽度是否小于这3列的总和将身体宽度更改为此总和。我希望这有帮助。如果不再问。 ：）

Answer 2

在这种情况下，宽度无关紧要。您的中心列需要一个浮动，以使您的右列不会换行。但是当你这样做时，你的保证金：auto将不起作用。最好是使用标准模式。

这是一个： http://matthewjamestaylor.com/blog/perfect-3-column.htm

以下是float：left的样子。我将列缩小以显示宽度不是问题并且适合框架。：

http://jsfiddle.net/ThinkingStiff/RPRQD/