gpt4 book ai didi

html - 文本脱离 div 容器

转载 作者:行者123 更新时间:2023-11-28 11:06:57 25 4
gpt4 key购买 nike

这就是我想要的-
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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com