底部 div 不居中答案

【问题标题】：bottom div not centered底部 div 不居中
【发布时间】：2013-09-20 14:47:31
【问题描述】：

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

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

请看示例。

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

我使用了 margin-top 20px，但没有任何反应

问候

【问题讨论】：

标签： html css

【解决方案1】：

只需删除：

float:left

来自 .bottomsection 类并添加

clear:both;

相反...

【讨论】：

【解决方案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>

【讨论】：

我已经更改了代码，但是当我这样做时，我的底部 div 向右推到了左右部分 div。 codepen.io/anon/pen/kvtcp
Margin-top 可能有点不稳定。在上面的 div 上使用边距底部。 .leftsection { 边距底部：20px; }
嗨 DreamTek 我有，但没有任何反应？有什么想法吗？
在您的链接上看起来不错？
我使用了你给我的代码并且工作正常，但是当我自己输入时，我错过了一些东西

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

在您的 HTML 中，您必须使用 i.e 清除浮动

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

【讨论】：

就像一个魅力。这种漂浮对我来说是最难适应的部分:(。感谢所有发帖帮助我的人。上帝保佑

【解决方案5】：

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

【讨论】：