gpt4 book ai didi

css - 在没有 Bootstrap 的情况下在文本内容上创建响应式 div

转载 作者:太空宇宙 更新时间:2023-11-03 22:37:58 24 4
gpt4 key购买 nike

我正在尝试使用图像、文本和 div 之间的间距创建响应式 div。我有带间距和文本的 div,但它们不会调整更多文本的大小。我正在努力实现这样的目标。 enter image description here

这个在一些 div 中有更多的文本,并且每个其他 div 也调整了大小。 enter image description here

这是我得到的:

.img{
width:300px;
height:100%;
}
.image {

position: relative;
width: 100%; /* for IE 6 */
}

h3{
background-color: rgba(0, 0, 0, 0.5);

position: absolute;
top: 105px;
left: 0;
width: 300px;
color:white;
}
<div class="image">

<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />

<h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />

<h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />

<h3>sadasdsadsadsadsadsadasdasdsadsadsadsadas</h2>

</div>

我需要 div 来调整文本的大小并覆盖它的底部。目前我正在使用 < br > 中断文本,这不是我的目标。

最佳答案

尝试 word-wrap: break-word; h3 属性

h3{
word-wrap: break-word;
}

希望这有帮助..

关于css - 在没有 Bootstrap 的情况下在文本内容上创建响应式 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45435814/

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