外部容器（围绕 div 元素的图像）答案

【问题标题】：Outter container ( Images surrounding div element )外部容器（围绕 div 元素的图像）
【发布时间】：2018-01-23 06:35:39
【问题描述】：

我需要创建一种“外部”图像容器来包围包含文本的 div。请参阅附图，大致了解我想要实现的目标。我尝试使用带有引导程序的列，但无法创建图像重叠效果（在右侧）。

<!-- 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 完成这个？

任何帮助将不胜感激。谢谢

【问题讨论】：

什么“图像重叠效果（右侧）” ...?
右侧较长的图像，向下延伸超过其所在元素的高度。
是的，好的，在这方面，以 3-6-3 列作为外部结构可能是有意义的...第一列获取左侧的三张图片，第二列获取图像top 和 content 下面，第三个将两个图像放在右边。那么图像实际上有多高就不再重要了。

标签： html css twitter-bootstrap image frontend

【解决方案1】：

好吧，据我所知，您需要将图像排列成倒“U”形，并将文本放在两个侧面图像的中间。这个想法是float相应的图像left或right，然后将文本的显示设置为inline-block。

以下代码按照问题中的要求排列了 4 个框，您可以使用 margin-left 属性将它们对齐。

注意这种排列只有在盒子/div 足够宽的情况下才有可能，因此请务必调整每个 div 的宽度。不一定像我做的那样，你可以随意改变它，只要确保方框足够宽以填满页面，否则排列将不会显示。

#top{
	display: inline-block;
	height: 20%;
	width: 50%;
	background-color: red;
}

#left{
	height: 50%;
	width: 25%;
	float: left;
	background-color: blue;
}

#text{
	height: 50%;
	width: 50%;
	background-color: green;
	text-align: center;
	float: left;
}

#right{
	height: 50%;
	width: 25%;
	background-color: yellow;
	float: right;
}

<body>
<div id='top'></div>
<div id='left'></div>
<div id='right'></div>
<div id="text"></div>
</body>

编辑不知道为什么stackOverflow无法显示运行此代码的结果，但我建议您复制它并手动运行它，它会显示类似于附加图像的内容。

【讨论】：

【解决方案2】：

我会将其设置为 3 列，尽管您尚未描述您希望它如何在较小的屏幕上显示，因为这些列将按顺序折叠。下面的 sn-p 是您可以做什么的粗略示例。

.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>

【讨论】：

【解决方案3】：

这样的？

.left-container, .right-container {
  width: 60px;
  float: left;
}
.center-container {
  float: left;
}
.img-small {
  width: 40px;
  height: 40px;
  margin: 10px;
  background-color: green;
}
.img-big {
  width: 40px;
  height: 80px;
  margin: 10px;
  background-color: green;
}
.img-wide {
  width: 80px;
  height: 40px;
  margin-top: 10px;
  background-color: green;
}
.text {
  width: 80px;
  height: 120px;
  margin-top: 10px;
  background-color: blue;
}

<body>
  <div class='left-container'>
    <div class='img-small'></div>
    <div class='img-small'></div>
    <div class='img-small'></div>
    <div class='img-small'></div>
  </div>
  <div class='center-container'>
    <div class='img-wide'></div>
    <div class='text'></div>
  </div>
  <div class='right-container'>
    <div class='img-small'></div>
    <div class='img-big'></div>
    <div class='img-small'></div>
    <div class='img-small'></div>
  </div>
</body>

【讨论】：