html - CSS Auto Margin 下推其他元素

Question

我正在努力使网站变得漂亮，到目前为止一切顺利，如果我使用 margin:0 auto，尝试将带有 2 个侧栏的栏居中时出现问题； 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

期待您的帮助，感谢!

Answer 1

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

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

编辑解释一下:我之前没有发why，我觉得可能有用。

docs

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the 'float' property.

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