CSS自动边距推下其他元素 [英] CSS Auto Margin pushing down other elements

问题描述

我试图使一个网站漂亮，到目前为止它已经很好，当尝试使一个列与2个列的中心时出现的问题，如果我使用 margin：0 auto ;这两个列是在中间中心列下面被按下，是否有一种方式可以占据中心列旁边的空间，即使是居中的？

I'm attempting to make a site beautiful, and so far it's gone quite well, by problem arose when attempting to center a column with 2 side columns, if I use margin:0 auto; the 2 side columns are pushed down beneath the middle centered column, is there a way for them to occupy space beside the central column, even while centered?

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

我希望你能帮助和感谢，如果期待！

I hope you can help and thanks if anticipation!

推荐答案

将 #right_column后面的 #center_column div。

Put the #center_column div after the #right_column div.

这不是最好的答案，因为它改变了标记来调整风格，但它应该工作， -fix。

This isn't the best of all answers as it changes the markup to adjust the style, but it should work for a quick-fix.

编辑说明：我没有发布为什么以前，我认为这可能是有用的。

Edit to explain: I didn't post a why before, and I think it might be useful.

文档

浮动框是在当前行上向左或向右移动的框。浮动（或浮动或浮动框）最有趣的特性是内容可能沿着它的边流动（或者被'clear'属性禁止这样做）。内容沿着左侧浮动框的右侧向下流动，并且向右侧浮动框的左侧流动。以下是浮动定位和内容流的介绍：在float属性的描述中给出了管理浮动行为的确切规则。

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 的当前行是 #center_column 之后。将 #center_column 放在左侧和右侧列后，当前行在浮动元素旁边。

I bolded the important part. Because the centered div was already in the display list, the current line for #left_column and #right_column is after #center_column. Once you put #center_column after the left and right columns, the current line is next to the floated elements.

这篇关于CSS自动边距推下其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！