我正在尝试使网站变得漂亮,到目前为止它已经很顺利了,当我尝试使用2个边列的列居中时出现问题,如果我使用margin:0 auto
; 2个侧柱被向下推到中间的中心柱下方,是否有一种方法可以占据中心柱旁边的空间,即使是在居中的位置?
这是我的CSS:
body {
background-image: url(../images/background.png);
background-repeat: repeat;
background-color: #F0C36B;
font-family:Arial;
color:#FFF;
}
#header, #footer {
text-align:center;
clear:both;
}
#header {
margin-bottom:0.5em;
}
#left_column, #right_column, #center_column {
background-color:#5B7A8C;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-icab-border-radius: 10px;
-o-border-radius: 10px;
border:solid #FFF 2px;
-moz-box-shadow: 0 0 10px #000000;
-webkit-box-shadow: 0 0 10px #000000;
box-shadow: 0 0 10px #000000;
}
#left_column {
width:20%;
float:left;
text-align:center;
}
#right_column {
width:20%;
float:right;
text-align:center;
}
#center_column {
width:50%;
padding:0.5em;
margin:0 auto;
}
#page_container {
width:90%;
margin:0 auto;
}
#headline {
font-family:TF2 Build;
font-size:2em;
}
#author {
font-style: italic;
font-size:0.7em;
}
@font-face {
font-family: "TF2";
src: url(../fonts/TF2.eot);
src: local("☺"),
url("../fonts/TF2.ttf") format("truetype");
}
@font-face {
font-family: "TF2 Build";
src: url(../fonts/tf2build.eot);
src: local("☺"),
url("../fonts/tf2build.ttf") format("truetype");
}
h2 {
font-family: "TF2";
color: #FFF;
margin:0.25em;
}
hr {
border: 1px solid #FFF;
}
我的网站位于http://tf2ware.net
我希望你能提供帮助,感谢期待!
答案 0 :(得分:3)
将#center_column
div放在#right_column
div。
这不是所有答案中最好的,因为它会更改标记以调整样式,但它应该可以快速修复。
编辑解释:之前我没有发布过为什么,我觉得它可能有用。
浮动是一个在当前行上向左或向右移动的框。浮动(或“浮动”或“浮动”框)最有趣的特征是内容可能沿其侧面流动(或禁止通过'clear'属性这样做)。内容沿左浮动框的右侧向下流动,沿右浮动框的左侧向下流动。以下是浮动定位和内容流程的介绍;有关浮动行为的确切规则在'float'属性的描述中给出。
我加粗了重要部分。由于居中的div已经在显示列表中,因此#left_column
和#right_column
的当前行是 #center_column
之后的。将#center_column
放在左列和右列之后,当前行旁边浮动元素。
答案 1 :(得分:1)
#page_container { text-align: center; }
#left_column { float: left; }
#right_column { float: right; }
并更改dom的顺序,使#center
列最后一次。
答案 2 :(得分:0)
如果你不想改变你的html中的顺序(对于搜索引擎优化,屏幕阅读器等),你也可以对侧栏使用绝对定位,但如果侧栏可以有一个问题,这可能会导致问题高度比中柱高。