图片与文本无法并排对齐的网页布局问题求助

问题情况 #

搭建网站时遇到图片无法与文本并排显示的问题，上方采用相同设计逻辑的模块可正常运行，但当前模块失效。另外说明：平时较少使用div标签，因为学校学习时得知并非必需。

可正常运行的代码片段 #

<div class="presentatie">
    <img src="assets/IMG/presentatie.jpg" alt="Jan-Joost presentatie" class="img--presentation">
    <div class="tekst--rood">
        <p class="tekst--groter">Lorem ipsum dolor sit amet<br></p>
        Lorem ipsum dolor sit amet<br><br>
        <p class="tekst--presentatie">
            Lorem ipsum dolor sit amet<br>
            <br>
            Lorem ipsum dolor sit amet <a class="click" href="Link">Click</a>
        </p>
    </div>
</div>

失效的代码片段 #

<div class="tekst--rood1">
    <p class="tekst--groter">Lorem ipsum dolor sit amet</p>
    Lorem ipsum dolor sit amet<br>
    <p class="tekst--workshop">
        MLorem ipsum dolor sit amet
        <br>
        De mogenlijkheden bespreken? <a class="click" href="Link">Click</a>
    </p>
</div>

<img src="assets/img/workshop.jpg" alt="Jan-Joost workshop" class="img--workshop">

对应的CSS样式 #

.img--presentation{
    display: inline-block;
    width: 514px;
    padding-left: 300px;
    padding-top: 75px;
}

.tekst--rood{
    color: red;
    display: inline-block;
    vertical-align: top;
    padding-top: 100px;
    font-size: 21px;
    margin-left: 50px;
}

.tekst--presentatie{
    display: inline-block;
    vertical-align: top;
    color: white;
    font-size: 21px;
}

.click{
    color: red;
    text-decoration: none;
}

.tekst--groter{
    font-size: 24px;
    font-weight: bold;
}

.img--workshop{
    display: inline-block;
    width: 505px;
    margin-left: 850px;
    margin-top: 25px;
    vertical-align: top;
}

.tekst--workshop{
    color: white;
    display: inline-block;
    font-size: 21px;
    vertical-align: top;
}

.tekst--rood1{
    color: red;
    display: inline-block;
    font-size: 21px;
    margin-left: 300px;
}

问题原因分析 #

1. 缺少统一父容器：正常模块的图片和文本被包裹在同一个.presentatie父div中，布局有约束；失效模块的文本div和img是独立同级元素，无容器约束，易受外部空间影响换行。
2. margin值过大导致宽度溢出：.tekst--rood1的margin-left:300px加上.img--workshop的margin-left:850px，再加上两者自身宽度，总宽度远超页面可用空间，触发自动换行。
3. 布局逻辑不一致：正常模块用小间距（margin-left:50px）排列图片和文本；失效模块文本在前、图片在后，且图片margin设置过于激进，破坏了并排条件。

解决方案 #

方案1：添加统一父容器并调整margin #

给失效模块的文本div和img加上和正常模块一致的父容器，同时修改图片的margin值：

<div class="presentatie">
    <div class="tekst--rood1">
        <p class="tekst--groter">Lorem ipsum dolor sit amet</p>
        Lorem ipsum dolor sit amet<br>
        <p class="tekst--workshop">
            MLorem ipsum dolor sit amet
            <br>
            De mogenlijkheden bespreken? <a class="click" href="Link">Click</a>
        </p>
    </div>
    <img src="assets/img/workshop.jpg" alt="Jan-Joost workshop" class="img--workshop">
</div>

修改CSS：

.img--workshop{
    display: inline-block;
    width: 505px;
    margin-left: 50px; /* 替换原850px的过大值 */
    margin-top: 25px;
    vertical-align: top;
}

方案2：改用Flex布局（更稳定） #

给父容器设置flex布局，无需依赖inline-block的特性，布局更稳定：

.presentatie{
    display: flex;
    align-items: flex-start; /* 和原vertical-align:top效果一致 */
    padding-left: 300px;
    padding-top: 75px;
}

只要将图片和文本放在.presentatie容器内，就能自动并排，无需额外设置inline-block。

方案3：调整元素宽度与间距 #

若不想添加父容器，需确保「文本div宽度 + 图片宽度 + 两者间距」≤ 页面可用宽度，同时将图片的大margin-left改为合理间距值，避免溢出换行。

内容的提问来源于stack exchange，提问作者user18299570