难以集中我的布局

时间:2013-08-05 21:39:07

标签: css html

我在这个网站上搜索了大约35分钟,我确信这是一个非常简单的答案,我可能会过度看待它,但我无法弄清楚如何使我的布局居中。

这是一个简单的布局,它有一个容器div,左边是div用于菜单,右边是div用于内容。 (这是迄今为止的CSS ..)

#container {
  text-align:center; 
  width: 960px; 
  background-color:#FFFFFF; 
  margin-right:10px; 
  margin-left:10px; 
  display:block;
}
#left {
  text-align:; 
  width:300px; 
  display:block; 
  background-color:#FFFFFF; 
  padding-left:5px; 
  padding-right:5px;
}
#right {
  text-align:left; 
  padding-left:10px; 
  padding-right:10px; 
  width:620px; 
  display:block;
}

当我保存并在浏览器中打开时,布局就在左边。我可以添加什么来让它去中心?

我尝试过其他人的一些事情'线程,没有任何工作。我做错了什么?

5 个答案:

答案 0 :(得分:0)

使用margin: 0 auto有一个很好的技巧 请查看this sitethis site以获取有关该主题的详细说明。

答案 1 :(得分:0)

将这3个div放在id为'content'的div中,然后声明一个类似这样的CSS规则:

#content {
   width: <width in px>;
   margin-left: auto;
   margin-right: auto;
}

'content'div中的所有内容 - 即您的布局 - 将显示在页面的中心。

边距的auto值是div的中心。

答案 2 :(得分:0)

#container {
    width: 960px; 
    background-color:#FFFFFF; 
    margin:0 auto;
}
#container:after{
    content:'';
    display:block;
    clear:both;
}
#left {
    width:300px; 
    float:left;
    padding:0 5px;
}
#right {
    padding:0 10px;
    width:620px; 
    float:right;
}

答案 3 :(得分:0)

尝试为这些列添加浮动。

EG

#left {
  float:left;
}
#right {
  float:right;
}

或者如果你想让它们相互冲洗,那么它们都会向左移动!

http://codepen.io/alexbaulch/pen/hzwnE

答案 4 :(得分:0)

其核心是保证金:0自动;在父母div。

如果你查看盒子大小,你将节省很多时间和痛苦:border-box;并开始使用百分比和ems而不是px。相信我。除了偶尔的边界外,我不会雇用任何有像素的人。另外 - 它更容易了。我还建议只使用id(#)用于javascript和超级特殊情况。坚持.class是现在的共识。祝你好运!

http://jsfiddle.net/sheriffderek/CN8Ev/

HTML

<div class="container">

    <div class="main">main</div>

    <div class="sub">sub</div>

</div> <!-- .container -->

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* google border box - moves padding to the inside of the box */ 
}

.container {
    width: 90%;
    max-width: 60em;
    margin: 0 auto; /* no margin on the top and bottom - auto margin on the sides */
    overflow: hidden; /* shame - google micro clear fix instead */
}

.main {
    width: 70%;
    float: left;
}

.sub {
    width: 30%;
    float: left;
}