Question

我需要创建一种“外部”图像容器来包围包含文本的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完成这个？

非常感谢任何帮助。感谢

Answer 1

我会将其作为3列，尽管您没有描述如何在较小的屏幕上查看，因为列将按顺序折叠。以下代码段是您可以执行的粗略示例。

  String wrk = scanner.nextLine();
  if(wrk.equals("1")){
     ...
    }

    else if(wrk.equals("2")){
       ....
   }

.padded {
  padding: 1px;
}

Answer 2

好吧，从我能得到的，你需要将图像排列为倒置的“U”形，并将文本放在两个侧面图像之间。我们的想法是相应地float图片left或right，然后将文字的显示设置为inline-block。

以下代码在问题中提出的排列中放置了4个框，您可以使用margin-left属性将它们对齐。

注意只有当box / div足够宽时才能进行此排列，因此请务必调整每个div的宽度。不一定如我所知，您可以根据需要更改它，只需确保盒子足够宽以填充页面或安排不会显示。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

Answer 3

这样的东西？

＆＃13;

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

＆＃13;

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

＆＃13;

Outter容器（div元素周围的图像）

3 个答案: