html - 外部容器(围绕 div 元素的图像)

Question

我需要创建一种图像的“外部”容器来围绕包含文本的 div。请查看所附图片，大致了解我要实现的目标。我试过使用带有 Bootstrap 的列，但我无法创建图像重叠效果(在右侧)。

<!-- Top Layer -->
<div class="col-md-12"><img src="image1.png"></div>

<!-- Left Layer -->
<div class="col-md-3"><img src="image2.png"></div>

<!-- Text (Middle) -->
<div class="col-md-6"><p>This is the text This is the text</p></div>

<!-- Right Layer -->
<div class="col-md-3"><img src="image3.png"></div>

但这显然会导致右侧的长图像出现问题。 有什么想法可以用 CSS 完成吗？

如有任何帮助，我们将不胜感激。谢谢

Answer 1

我会把它分成 3 列，尽管您没有描述您希望它在较小的屏幕上看起来如何，因为列会按顺序折叠。以下代码段是您可以执行的操作的粗略示例。

.padded {
  padding: 1px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Left Column -->
<div class="center-block" style="width: 80%">
  <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <div class="row">
        <img src="http://via.placeholder.com/100x100" class="padded" />
      </div>
      <div class="row">
        <img src="http://via.placeholder.com/100x100" class="padded" />
      </div>
      <div class="row">
        <img src="http://via.placeholder.com/100x100" class="padded" />
      </div>
    </div>

    <!-- Text (Middle) -->
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div class="text-center">
          <img src="http://via.placeholder.com/200x100" class="padded" />
        </div>
        <div class="panel">
          This is the text This is the text
        </div>
    </div>

    <!-- Right Column -->
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <div class="row">
        <img src="http://via.placeholder.com/100x200" class="padded" />
      </div>
      <div class="row">
        <img src="http://via.placeholder.com/100x100" class="padded" />
      </div>
    </div>
  </div>
</div>