有没有办法在多个单元格上叠加图像？

Question

嗨，我正在尝试为网站实现以下图片：

我已经考虑过如何根据 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>

有没有办法在多个单元格上叠加图像？

Is there a way to overlay an image on more than one cell?

html

css

frontend

web-frontend

bootstrap-4