Question

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

请参阅示例。

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

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

问候

Answer 1

只需删除：

float:left

来自.bottomsection类并添加

clear:both;

，而不是...

Answer 2

这是因为您将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>

Answer 3

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

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

Answer 4

确定，从你的底部div移除浮动。

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

在您的HTML中，您必须清除浮点数，即

<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/

Answer 5

它无缘无故地漂浮，这导致左侧出现。删除它。这次它应该没问题，但是你无法看到它，因为它里面没有任何东西。添加overflow:hidden;以避免这种情况。那么你可能也希望给出一些余量。请记住，明智地使用浮子，不是每个问题都需要漂浮。

底部div不居中

5 个答案: