0

出于某种原因，当我将左右边距设置为自动时，布局的底部似乎没有居中

http://codepen.io/anon/pen/kvtcp

请参阅示例。

我已经用您提供的一些示例更改了代码，但我还有另一个问题。底部 div 已经向上推到左右部分 div 了？

我使用了 margin-top 20px 并且没有任何反应

问候

4

5 回答 5

3

只需删除：

float:left

从 .bottomsection 类并添加

clear:both;

反而...

于 2013-09-20T14:53:30.967 回答
1

发生这种情况是因为您将 div 设置为向左浮动并且屏幕位于左边缘。您上面的 div 留有余量来填充它们。

我建议将您的容器居中。

http://codepen.io/anon/pen/sHvCA

body{  
    background:#90F;
}
#container {
    width: 1000px;
    height: 1200px;
    padding-top: 25px;
    overflow: auto;
  margin:0 auto;
}

.header {
    width: 800px;
    height: 100px;
}
.leftimage {
    float: left;
}
.middle {
    height: 200px;
    background:#FFF;
    width: 800px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.leftsection {
    width: 300px;
    background-color: #FFF;
    height: 400px;
    margin-top: 10px;
    float: left;
    margin-left: 100px;
}
.rightsection {
    background-color: #0F0;
    height: 400px;
    width: 479px;
    float: left;
    margin-top: 10px;
    margin-left: 20px;
  margin-bottom: 20px;
}

.bottomsection {
  clear:both;
    height: 200px;
    background: #FFF;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

</style>
于 2013-09-20T14:54:24.107 回答
0

那是因为你有float:left;它。删除它，然后添加clear:both;。

我建议将左右浮动的 div 包装在另一个 div 中，并应用于overflow:hidden外部 div 以获得更好的控制。

于 2013-09-20T14:51:04.107 回答
0

好的，从底部 div 中删除浮动。

.bottomsection {
    height: 200px;
    background: #FFF;
    width: 800px;
    /*float: left;*/
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

在您的 HTML 中，您必须使用 ie 清除浮动

<div class="leftsection"></div> 
<div class="rightsection"></div>
<div style="clear:both;"></div>
<div class="bottomsection"></div>

这是一个快速而肮脏的解决方案。

这是一个很好的链接，即关于浮动 div 的

http://css-tricks.com/all-about-floats/

于 2013-09-20T14:51:55.510 回答
0

它无缘无故地浮动，这导致出现在左侧。删除它。这次应该没问题，但是你看不到它，因为里面什么都没有。添加overflow:hidden;以避免这种情况。那么你可能也想给一些保证金。请记住，明智地使用浮点数，并不是每个问题都需要浮点数。

于 2013-09-20T14:53:18.757 回答