有没有一种方法可以将图像叠加在多个单元格上？

Question

Heyo，我正在尝试为网站实施以下图像：

我已经考虑过如何用HTML构造它，到目前为止，我已经做到了：

使用以下代码：

<div class="container">
    <div class="row">
        <div class="col-10">
            <h1>TEXT TEXT TEXT COMPANY NAME'S TEXT TEXT</h1>
        </div>

        <div class="col-2">
            <img src="..." alt="Image">
        </div>
    </div>

    <div class="row">
        <div class="col-10">
            <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
        </div>
    </div>

    <div class="row">
        <input class="form-control form-control-sm subscribe-email" type="text" placeholder="Your Email">
    </div>
</div>

如何使图像位于两个单元格的顶部？感谢您的帮助！

Answer 1

只需将您的段落放在h1下的第一个col-10中。在这种情况下，不需要第二行。那就是专栏的重点。

<div class="container">
    <div class="row">
        <div class="col-10">
            <h1>TEXT TEXT TEXT COMPANY NAME'S TEXT TEXT</h1>
            <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
        </div>

        <div class="col-2">
            <img src="..." alt="Image">
        </div>
    </div>

    <div class="row">
        <input class="form-control form-control-sm subscribe-email" type="text" placeholder="Your Email">
    </div>
</div>