Question

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

[容器div的样式属性（id：Post）继承自Permalink页面的样式属性。]

从主题编辑器中获取的所有相关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/ 那我究竟做错了什么？我觉得答案非常简单，我正好盯着我，当我发现它是什么时，我会踢自己......

Answer 1

在这种情况下，我建议使用表格。由于你的浮动陈述，div被抛弃了。

效果将是相同的，它将更容易编程，如果其他人需要查看您的代码，将更容易理解。我花了很多时间搞乱div，float和display，试图让div像桌子一样工作。我有时认为这不值得。

我希望这会有所帮助。

Answer 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

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

2 个答案: