为什么我的内容会溢出容器 div？答案

【问题标题】：Why is my content overflowing out of my container div?为什么我的内容会溢出容器 div？
【发布时间】：2013-11-24 21:11:40
【问题描述】：

我觉得问这个真的很愚蠢，因为它看起来很基本，但由于某种原因，我的容器 div 的高度没有扩大以容纳其中的 div。我正在使用我的联系方式在 Tumblr 上构建一个自定义页面（注意：不是在索引/永久链接页面上，而是在一个单独的页面上）并且我使用 div 作为一种临时表格，因为 html 表格标签似乎不起作用在 Tumblr 上的自定义页面上。

[容器 div (id: Post) 的样式属性继承自永久链接页面的样式属性。]

取自主题编辑器的所有相关 CSS：

#cent{
background-color:#FFE5E5;
padding:5px;
position:static;
width:800px;
margin: 0px auto;
}

#post{
background-color:#fff;
border:10px ridge #ff0000;
float:none;
width:700px;
margin: 2px auto;
padding:10px;
}

.Division{
float: left;
width: 300px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
font-weight: bold;
}
.Division2{
float: left;
margin-left: 0px;
margin-bottom: 10px;
padding: 5px;
}

联系人页面上的 HTML：

<div id="cent">
<div id="post">
<div class="Division">Telephone Number:</div>
<div class="Division2">+6012-3456789</div>
<br/>
<div class="Division">E-Mail Address:</div>
<div class="Division2">sample@live.com.my</div>
<br/>
<div class="Division">Address:</div>
<div class="Division2">Line 1 <br />Line 2 <br />Line 3 <br />Line 4</div>
</div>
</div>

哦，我在这里做了一件小事：http://jsfiddle.net/Yelrihs36/wkCQR/ 那么我到底做错了什么？我觉得答案真的很简单，直接盯着我的脸，当我发现它是什么时，我会踢自己......

【问题讨论】：

增加高度有帮助吗：162px； #post？
@EmmadKareem 有趣的是它实际上确实......我想这将是我的后备计划，以防我不明白。如果我决定添加更多信息，我将不得不继续寻找新的维度，但至少它可以工作:) 谢谢

标签： css html layout containers tumblr

【解决方案1】：

在这种情况下，我建议使用表格。由于您的 float left 语句，div 被丢弃了。

效果将是相同的，并且如果其他人需要查看您的代码，它将更容易编程并且更容易理解。我花了很多时间来处理 div、float 和 display 试图让 div 像一张桌子一样工作。我只是觉得有时候不值得。

我希望这会有所帮助。

【讨论】：

【解决方案2】：

您必须将#post 更改为float: left

#cent{
background-color:#FFE5E5;
padding:5px;
position:static;
width:800px;
margin: 0px auto;
}

#post{
background-color:#fff;
border:10px ridge #ff0000;
float:left;
width:700px;
margin: 2px auto;
padding:10px;
}

.Division{
    float: left;
    width: 300px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 5px;
    font-weight: bold;
}
.Division2{
    float: left;
    margin-left: 0px;
    margin-bottom: 10px;
    padding: 5px;
}

corrected fiddle

【讨论】：