我一直坚持根据其中的文本量来调整 block 的高度。在台式机上它工作正常,但在我的 iPhone 上文本会覆盖紫色背景的 div。
生活演示:https://www.ruslanchik.ru/en/ .要重现该问题,您可以使用您的移动设备。
.section-with-personal-photo {
width: 100%;
height: 100%;
min-height: 360px;
background-image: linear-gradient(126deg, rgb(92, 52, 116)40%, rgb(142, 102, 206)100%)
}
.section-with-personal-photo-image {
padding: 0;
display: block;
float: left;
clear: left;
content: url("//res.cloudinary.com/ruslanchik/image/upload/c_scale,h_360/v1525190031/ruslanchik.ru/i/avatars/LinkedIn-photo-shooting-session-05.04.2018.png")
}
.section-with-personal-photo-text {
height: 100%;
max-width: 68%;
float: right;
color: #ffffff
}
<div class=section-with-personal-photo>
<div class=section-with-personal-photo-image></div>
<div class=section-with-personal-photo-text>
<h3 id=resume>CV</h3>
<p>I will tailor it to your specific vacancy and do a keyword opimisation.</p>
<ul class=dotted-list>
<li><a href=//www.ruslanchik.ru/en/cv/professional/ title="Ruslan Seletskiy's Professional CV" target=_blank>Professional CV</a></li>
<li><a href=//www.ruslanchik.ru/en/cv/academic/ title="Ruslan Seletskiy's Academic CV" target=_blank>Academic CV</a> <span> featuring with a long appendix</span></li>
</ul>
<p id=make-an-offer>Let me know about some opportunities available at your organisation:
<ul class=dotted-list>
<li><a href="mailto:ruslanchik@ruslanchik.ru?subject=Available%20career%20opportunities%20at%20<Organisation name>" title="Send an email to ruslanchik@ruslanchik.ru">ruslanchik@ruslanchik.ru</a></li>
<li><a href="mailto:ruslan.seletskiy@gmail.com?subject=Available%20career%20opportunities%20at%20<Organisation name>" title="Send an email to ruslan.seletskiy@gmail.com">ruslan.seletskiy@gmail.com</a> <span> if you think my domain email is unprofessional</span></li>
</ul>
</div>
</div>
我检查了 Stackoverflow 上的各种帖子,但其中许多的解决方案都不起作用。对于所有其他问题,解决方案(例如 how do I give a div a responsive height )使布局变得更糟。
非常感谢任何相关帮助。
最佳答案
您还可以从“section-with-personal-photo-text”类中删除 float 和 max-width。
然后向“section-with-personal-photo”添加 32% 的填充。这导致 div 像这样扩展:
请注意(您的图像不会出现,因为 cloudinary 域出于某种原因在我的网络上被阻止,但它应该仍然有效)
关于html - 坚持 HTML block 的响应高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50122456/