这就是我想要的-
1. div 的最小高度应为 100%，以便边框显示全屏
2.它应该在水平中间。
3.里面的内容应该是拉伸(stretch)的。
现在的问题是这三件事都在工作，但最后一个“hello”正在离开容器。我使用了清晰的 float 。但它不工作。
帮我解决一些 CSS 技巧。或者指出我是否做错了什么。
这是 jsfiddle 链接 - http://jsfiddle.net/2U5hh/
这是我的html代码-
<body>
<table class="clearfix">
<tr height="15%">
<td id="image_td">
<img src="img/smthing.png" alt="E-Learn" />
</td>
</tr>
<tr height="85%">
<td>
<div id="td_content_div">
<p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p>
</div>
</td>
</tr>
</table>
</body>
这是CSS代码-
html, body
{
height:100%;
width:100%;
margin:0 0 0 0;
}
.clearfix {
max-width: 500px;
margin: 2% auto;
border-radius:25px;
padding:2% 2% 5% 2%;
height:96%;
width:96%;
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
}
#image_td{
float: right;
margin-right: 5%;
margin-top: 2%;
}
#image_td img{
max-width:96%;
height:auto;
}
#td_content_div {
position:relative;
border-radius:25px;
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
width:94%;
height: 94%;
margin:3% 3% 1% 3%;
vertical-align: middle;
}
最佳答案
我不确定你到底想要什么，但如果你只是想让最后一个 p 留在容器中，我所做的就是将 #td_content_div 的高度更改为 100%，它似乎有效。您也许可以完全删除该 id 上的高度声明，但它似乎不尊重段落的边距。根据情况，这可能是预期的效果。
关于html - 文本脱离 div 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22209085/