css - 为什么我的内容溢出我的容器 div？

Question

我问这个问题真的很愚蠢，因为它看起来很基本，但出于某种原因，我的容器 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>

哦，我在这里做了一个 fiddle :http://jsfiddle.net/Yelrihs36/wkCQR/ 那么我到底做错了什么？我觉得答案真的很简单，而且直勾勾地盯着我看，当我发现它是什么时，我会踢自己一脚...

Answer 1

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

效果是一样的，如果其他人需要看你的代码，编程会更容易，也更容易理解。我花了很多时间研究 div、float 和 display，试图让 div 像表格一样工作。我只是觉得有时候不值得。

希望对您有所帮助。