CSS自动保证金推低其他元素

我试图使一个网站美丽，到目前为止它消失得很好，由于问题产生时，试图以2个侧栏中心列，如果我使用margin:0 auto; 2个侧面的柱子被推下中间柱子的中间，有没有办法让他们占据中央柱子旁边的空间，哪怕是居中？CSS自动保证金推低其他元素

这里是我的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

我希望你能帮忙，如果预期的感谢！

来源

2011-03-02 Smashman

把#center_column div放在#right_column div之后。

这不是所有答案中的最佳答案，因为它会更改标记以调整样式，但它应该适用于快速修复。

编辑说明：我没有发布之前的原因，我认为它可能是有用的。

docs

浮子是被移位到左边或右边对当前行一个框。浮动（或“浮动”或“浮动”框）最有趣的特征是内容可能沿着其侧面流动（或者被“清除”属性禁止这样做）。内容沿着左浮动框的右侧向下流动，并沿右浮动框的左侧向下流动。以下是浮动定位和内容流的介绍;关于浮动行为的确切规则在'浮动'属性的描述中给出。

我加粗了重要部分。因为居中div已经在显示列表中，所以#left_column和#right_column的当前行是#center_column之后的。一旦你把#center_column左右栏之后，当前行就是旁边的浮动元素。

来源

2011-03-02 18:13:58 zzzzBov

+1这是方法。 – thirtydot 2011-03-02 18:15:01

但是这些项目只是出现在'＃center_column'列div的顶部。我希望他们出现在旁边。 – Smashman 2011-03-02 18:15:30

等一下，什么？ http://tf2ware.net/ 完美运作。我试过了！非常感谢无论如何，我猜你根本不需要求助。 – Smashman 2011-03-02 18:17:36

#page_container { text-align: center; } 
#left_column { float: left; } 
#right_column { float: right; }

并更改dom的顺序使#center列最后。

来源

2011-03-02 18:16:54 muirbot

如果你不想改变你的HTML（对于搜索引擎优化，屏幕阅读器等）的顺序，你也可以对侧栏使用绝对定位，但这可能会导致问题，如果侧栏可以有比中心柱更高的高度。

来源

2011-03-02 18:19:08 jeroen

CSS自动保证金推低其他元素

回答

相关问题