Question

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

我希望你能提供帮助，感谢期待！

Answer 1

将#center_column div放在#right_column div。

之后

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

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

docs

浮动是一个在当前行上向左或向右移动的框。浮动（或“浮动”或“浮动”框）最有趣的特征是内容可能沿其侧面流动（或禁止通过'clear'属性这样做）。内容沿左浮动框的右侧向下流动，沿右浮动框的左侧向下流动。以下是浮动定位和内容流程的介绍;有关浮动行为的确切规则在'float'属性的描述中给出。

我加粗了重要部分。由于居中的div已经在显示列表中，因此#left_column和#right_column的当前行是 #center_column之后的。将#center_column放在左列和右列之后，当前行旁边浮动元素。

Answer 2

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

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

Answer 3

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

CSS Auto Margin推下其他元素

3 个答案: