CSS三列布局问题

Question

#left_column {
   float: left;
   border: 1px solid #ccc;
   padding: 5px;
  width: 20em;
}

#main_content {

  margin-left:  25em;
   border: 1px solid #ccc;
  padding: 5px;
  width: 30em;
}

#right_column {
 margin-left: 60em;
 width: 7em;
    border: 1px solid #ccc;
   padding: 5px;
}

我想在这里找到三个垂直列。水平定位是我想要的方式，但我在垂直对齐方面遇到了一些麻烦。出于某种原因，right_column被推到了main_content列的下方。我希望所有列都从页面顶部开始。

Answer 1

#right_column出现在#left_column和#main_content下面的原因是因为你没有浮动#main_content或#right_column。

#main_content和#right_column仍然是html文档正常流程的一部分。这意味着他们将出现在彼此之下。

如果你想让所有3个区域彼此相邻，你可以将#main_content和#right_column浮动并减少/删除边距左边

Answer 2

向右浮动右栏。如果您没有指定浮动，则会将其向下推。

#right_column {
 margin-left: 60em;
 width: 7em;
 border: 1px solid #ccc;
 padding: 5px;
 float:right;
}

另外，请尝试减小主要内容区域的宽度，以查看右列是否会跳回到它旁边。

Answer 3

尝试将float:right;添加到#right_column

Answer 4

放这些行：

//Left:
float:left;

//MAIN:
margin-left: 20em; //these will define the width
margin-right: 20em;

//Right:
float:right;

Answer 5

您也可以查看此page。有很多例子。