[英]CSS three column layout issue
#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;
}
I am trying to get three vertical columns on my page here. 我正在尝试在此处的页面上获得三个垂直列。 The horizontal positioning is the way I want it to be, but I am having some trouble with the vertical alignment.
水平定位是我想要的方式,但是垂直对齐有些麻烦。 For some reason the right_column is getting pushed below the main_content column.
由于某些原因,right_column被推到main_content列下方。 I would like to have all columns start at the top of the page.
我希望所有列都从页面顶部开始。
The reason #right_column is appearing below #left_column and #main_content is because you are not floating the #main_content or the #right_column. #right_column出现在#left_column和#main_content下方的原因是因为您没有浮动#main_content或#right_column。
#main_content and #right_column are still part of the normal flow of the html document. #main_content和#right_column仍然是html文档正常流程的一部分。 This mean they will appear below one another.
这意味着它们将彼此下方出现。
If you want all 3 areas to be next to each other you can float the #main_content and #right_column left and reduce/remove the margin-left 如果您希望所有3个区域都相邻,则可以向左浮动#main_content和#right_column,并减少/移除左边距
Float right column to right. 向右浮动右列。 If you don't specify floating, it will be pushed down.
如果您未指定浮动,它将被下推。
#right_column {
margin-left: 60em;
width: 7em;
border: 1px solid #ccc;
padding: 5px;
float:right;
}
Also, try decreasing the width of the main content area to see if right column jumps back beside it. 另外,请尝试减小主要内容区域的宽度,以查看右列是否在其旁边跳回。
Try adding float:right;
尝试添加
float:right;
to your #right_column 到您的#right_column
Put These Lines: 将这些行:
//Left:
float:left;
//MAIN:
margin-left: 20em; //these will define the width
margin-right: 20em;
//Right:
float:right;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.