Html 文本从div容器中取出
这就是我想要的-Html 文本从div容器中取出,html,css,Html,Css,这就是我想要的- 1.div的最小高度应为100%,以便它可以全屏显示 2.它应该在水平中间 3.它应该是拉伸的,里面有内容。 现在的问题是,这三个东西都在工作,但在最后一个“你好”是走出容器。我用的是透明浮球。但它不起作用。 帮我解决一些css技巧。或者指出我做错了什么。 这里是JSIDLE链接- 这是我的html代码- <body> <table class="clearfix"> <tr height="15%"> <td id
1.div的最小高度应为100%,以便它可以全屏显示
2.它应该在水平中间
3.它应该是拉伸的,里面有内容。
现在的问题是,这三个东西都在工作,但在最后一个“你好”是走出容器。我用的是透明浮球。但它不起作用。 帮我解决一些css技巧。或者指出我做错了什么。
这里是JSIDLE链接- 这是我的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>
添加<代码>高度:自动代码>至
#td#u content_div
#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;
height:auto;
}
p { margin-left:20px; }
我不确定您到底想要什么,但如果您只是想让最后一个p留在容器中,我所做的就是将“td#u content_div”的高度更改为100%,这似乎有效。您可能可以完全删除该id上的高度声明,但它似乎不尊重段落的边距。根据具体情况,这可能是理想的效果。您需要将高度:auto和溢出:auto如下所示:
#td_content_div {
position:relative;
border-radius:25px;
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
width:94%;
margin:3% 3% 1% 3%;
vertical-align: middle;
height: auto;
overflow:auto
}
若您只设置了height:auto,那个么圆角上会有一些难看的内容。干杯 像这样的东西你想要吗?是的,我想要里面的文字。但当我们在里面加上更多的“p”标签时,它就在外面了。这个呢?很好。但我不希望它太可滚动,我只希望它得到拉伸。这是当我使用自动时发生的事情。我想让那个容器达到全屏高度。这就是我使用auto时发生的情况。jsfiddle.net/Pzz22/4我希望该容器具有全屏高度。是的,但您将其设置为固定像素,我不希望这样,因为我正在使我的页面响应。谢谢你的帮助。这已经解决了。我把td U内容分区改为100%。现在它不能从容器中取出。你的解决方案成功了。我确实将高度设置为100%,这就是我想要的。现在工作正常了
#td_content_div {
position:relative;
border-radius:25px;
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
width:94%;
margin:3% 3% 1% 3%;
vertical-align: middle;
height: auto;
overflow:auto
}