You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何使图片与段落文本在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范围:
    float:right效果
  • 使用vertical-align属性,效果不符合预期:
    vertical-align效果

现寻求解决方案,使图片能在容器的padding范围内与段落文本对齐。

内容的提问来源于stack exchange,提问作者Lunyae

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.15 13:30:51