Question

我有四个图像，我试图将三个放在中心，一个放在中心图像的顶部，如下所示：

               [image2]
[image1]       [image3]        [image4]

以下是我的意思的图片示例：http://prnt.sc/a9iyu6

唯一的问题是所有图像都在彼此之下。

这是我目前正在使用的代码：

<img src="images1.png" /> 
<img src="images2.png" />
<img src="images3.png" />
<img src="images4.png" />

Answer 1

您对here

等解决方案有何看法？

我写的只是CSS应该为你做的工作：

body {
  text-align: center;  
}

img {
  float: left;
  width: 33%;
  height: 100px;
}

img:nth-child(1){
  margin-top: 100px;
}

img:nth-child(3) {
  margin-top: 100px;
}

img:nth-child(4){
  float: left;
  clear: both;
  margin-left: 33%;
  margin-top: -100px;
}

<img src="http://lorempixel.com/200/200/"/>
<img src="http://lorempixel.com/200/200/?v=2"/>
<img src="http://lorempixel.com/200/200/"/>
<img src="http://lorempixel.com/200/200/"/>

在该解决方案中除了一些CSS之外，您不必向代码中添加任何内容。当然，您可以尝试将边距调整为您想要获得的边距。

Answer 2

这是你想要的吗？

div {
  padding-top:100px;
  display:inline-block;
}

img {
  float:left;
  height:100px;
  width:50px;
}

img:nth-child(2) {
  margin-top:-100px; 
}

<div>
<img src="images1.png" /> 
<img src="images2.png" />
<img src="images3.png" />
<img src="images4.png" />
</div>

Answer 3

这是一个想法：JsFiddle

这是css：

#container{
  display:flex
}
#centered{
  display:flex;
  flex-direction:column;
}

更新后的HTML：

<div id="container">
    <img src="http://placehold.it/150x250/CCCCCC" /> 
<div id="centered">
    <img src="http://placehold.it/150x150/FEFEFE" />
    <img src="http://placehold.it/150x150/AAAAAA" />
</div>
    <img src="http://placehold.it/150x250/BBBBBB" />
</div>

Flex-box is pretty cool。只需稍微玩一下，你就可以按照你想要的方式得到它。

将三个图像彼此相邻，将另一个图像对齐在中心图像的顶部

3 个答案: