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

您也可以在此頁面上查看。 有很多例子。