CSS三列布局問題

#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列的下方。我希望所有列都從頁面頂部開始。CSS三列布局問題

來源

2010-03-01 guy

你使用什麼（x）html？ – 2010-03-01 03:26:54

我還沒有指定。 – guy 2010-03-01 03:41:10

將右列浮動到右側。如果你不指定浮動，它將被推下。

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

此外，請嘗試減少主要內容區域的寬度，以查看右欄是否跳回到旁邊。

來源

2010-03-01 03:01:40 Sarfraz

當我添加浮動：它正在推動列到容器的最右側，但列仍然在主列下。 – guy 2010-03-01 03:44:21

好吧，所以剩餘空間是問題。浮動命令在刪除餘裕線後工作。 – guy 2010-03-01 03:55:13

@guy：那麼這是個好消息，是的，你需要在添加浮動權後修改餘裕。謝謝 – Sarfraz 2010-03-01 05:19:08

嘗試增加float:right;您#right_column

來源

2010-03-01 03:03:00

把這幾行：

//Left: 
float:left; 

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

//Right: 
float:right;

來源

2010-03-01 03:07:48 fern17

#right_column是出現以下#left_column和#main_content的原因是因爲你不是浮在#main_content或＃ right_column。

#main_content和#right_column仍然是html文檔正常流程的一部分。這意味着它們會出現在另一個之下。

如果希望所有3個區域是彼此相鄰，你可以浮動#main_content和#right_column左和減少/刪除利潤率左

來源

2010-03-01 03:20:04 nobody

，你可以看看這個page爲好。有很多例子。

來源

2010-03-01 04:05:05 pars

CSS三列布局問題

回答

相關問題