如何使图片与段落文本在padding范围内对齐?
问题:让图片在容器padding范围内与段落文本对齐
当前效果如下,箭头指示了我期望图片所处的位置:
我的HTML代码:
<section class="box2"> <h1 class="underline"><b>Husk dit helbred!</b></h1> <p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held og lykke med jeres mange fremtide projekter!</p> <img src="images/emilybillede.jpg" alt=""> </section>
我的CSS代码:
.underline { text-decoration: underline; } .box2 img{ position: right; width: 200px; height: 200px; } .box2 { margin: 0 auto; margin-right: 20%; margin-left: 20%; margin-top: 20px; background-color: rgb(255, 255, 255); padding: 15px; height: 50%; } p { width: 300px; }
我尝试过的方法:
- 使用
float: right属性,但图片会超出容器的padding范围:
- 使用
vertical-align属性,效果不符合预期:
现寻求解决方案,使图片能在容器的padding范围内与段落文本对齐。
内容的提问来源于stack exchange,提问作者Lunyae
相关产品推荐
相关产品推荐

