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 下方的原因是因为您没有 float #main_content 或#right_column。

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

如果您希望所有 3 个区域彼此相邻，您可以将 #main_content 和 #right_column 向左浮动并减少/删除 margin-left