CSS Auto Margin推下其他元素

时间:2011-03-02 18:10:35

标签: html css

我正在尝试使网站变得漂亮,到目前为止它已经很顺利了,当我尝试使用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

我希望你能提供帮助,感谢期待!

3 个答案:

答案 0 :(得分:3)

#center_column div放在#right_column div。

之后

这不是所有答案中最好的,因为它会更改标记以调整样式,但它应该可以快速修复。

编辑解释:之前我没有发布过为什么,我觉得它可能有用。

docs

  

浮动是一个在当前行上向左或向右移动的框。浮动(或“浮动”或“浮动”框)最有趣的特征是内容可能沿其侧面流动(或禁止通过'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中的顺序(对于搜索引擎优化,屏幕阅读器等),你也可以对侧栏使用绝对定位,但如果侧栏可以有一个问题,这可能会导致问题高度比中柱高。