如何将图像放在另一个图像下方？答案

【问题标题】：How to put an image below another image?如何将图像放在另一个图像下方？
【发布时间】：2018-01-18 07:05:39
【问题描述】：

我想像this一样将图像设置在一个下方

但这些图像显示为this

这是我的带有 css 的 html 代码。在代码中，我使用了列，但问题没有解决。图像未按我想要的方式显示。

<div class="row">
    <div class="card">
        <img alt="Card image cap" class="card-img-top" src="https://i.pinimg.com/736x/04/54/98/045498ad4b9b3cdd4d780fcfcaf3392a--cake-decorating-fondant-spring-cakes-decorating.jpg" >
    </div>>    
    <div class="card">
        <img alt="Card image cap" class="card-img-top" src="http://www.sliceofitaly.com/files/product/full/0415BDDC-justformylove.jpg" >
    </div>    
    <div class="card">
        <img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmZNLgk07M9ksvjkM8QHxqdFOkxnqFROYgMBu1Q5T-m2jNfrwF" >
    </div>    
    <div class="card">
        <img alt="Card image cap" class="card-img-top" src="http://www.fnstatic.co.uk/images/content/recipe/mini-christmas-cakes.jpg" >
    </div>    
    <div class="card">
        <img alt="Card image cap" class="card-img-top" src="https://i.pinimg.com/736x/32/6c/19/326c191b3b4a373d0b73189551b4a693--spider-man-cakes-spiders.jpg" >
    </div>      
    <div class="card">
        <img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqESHTW7PwOycYQucPrFkEaTPfdsIod7GYqm3fIUNyQUzHGiS0" >
    </div>
    <div class="card">
        <img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" >
    </div>
    <div class="card">
        <img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" >
    </div> 
    <div class="card">
        <img alt="Card image cap" class="card-img-top" src="http://www.fnstatic.co.uk/images/content/recipe/mini-christmas-cakes.jpg" >
    </div>   
    <div class="card">
        <img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" >
    </div>
    <div class="card">
        <img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" >
    </div>
</div>

图片的css

 .card-img-top 
 {
  width: 20%;
  height:auto;
  margin:5px;
  display:inline-block;
  float:right;
 }

【问题讨论】：

使用列而不是行。
您可以在这里查看以获得更好的想法：w3bits.com/css-masonry
@Hanif 和 Usman 谢谢兄弟

标签： html css codeigniter

【解决方案1】：

我尝试在 row-div 上使用 column-count 属性。通常它用于将大块文本分成相等的列，但我发现它也可以处理图像！

.row {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 3;
  -webkit-column-gap: 0px;
  -moz-column-count: 3;
  -moz-column-gap: 0px;
  column-count: 3;
  column-gap: 0px;
}

.card {
  width: 100%;
  height: auto;
}

.card-img-top {
  width: 100% !important;
  height: auto !important;
  margin: 5px;
}

【讨论】：

【解决方案2】：

这是我的演示代码，我正在使用 flexBox。以完整模式查看

设置 Box height:auto 这样它会自动设置所有 Box 的高度

<html>
<style>
html{
  height: 100%;
}

body{
  height: 100%;
}

#wrapper{
  height: 100vh;
   display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.box{
    display: flex;
    background: black;
    margin: 0.5%;
}

#box-1{
    height: 50%;
    width: 32%;
}

#box-2{
    height: 46%;
    width: 32%;
}

#box-3{
    height: 20%;
    width: 33%;
}

#box-4{
    height: 49%;
    width: 33%;
}

#box-5{
    height: 25%;
    width: 33%;
}

#box-6{
    height: 20%;
    width: 33%;
}

#box-7{
    height: 75%;
    width: 33%;
}

p{
  color: white;
}
</style>
<body>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="wrapper">
		<div id="box-1" class="box">
			<p>Hi</p>
		</div>
		<div id="box-2" class="box">
			
		</div>
		<div id="box-3" class="box">
			
		</div>
		<div id="box-4" class="box">
			
		</div>	
		<div id="box-5" class="box">
			
		</div>
		<div id="box-6" class="box">
			
		</div>	
		<div id="box-7" class="box">
			
		</div>		
	</div>
</body>
</html>
</body>
</html>

【讨论】：

【解决方案3】：

这是带有图片的示例......！

<html>
<style>
html{
  height: 100%;
}

body{
  height: 100%;
  display:flex;
}

#wrapper{
    min-height: 100vh;
	height: auto;
    display: flex;
    flex-direction: column;
	width:32.3%
}

.box{
    display: flex;
    background: black;
    margin: 0.5%;
    width: 100%;
    height: auto;
}

.box img{
	max-height:50%;
	min-height:15%;
	width:100%;
}



p{
  color: white;
}
</style>
<body>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="wrapper">
		<div class="box">
			<img alt="Card image cap" class="card-img-top" src="https://i.pinimg.com/736x/04/54/98/045498ad4b9b3cdd4d780fcfcaf3392a--cake-decorating-fondant-spring-cakes-decorating.jpg" />
		</div>
		<div class="box">
			<img alt="Card image cap" class="card-img-top" src="http://www.sliceofitaly.com/files/product/full/0415BDDC-justformylove.jpg" />
		</div>
		<div class="box">
			<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmZNLgk07M9ksvjkM8QHxqdFOkxnqFROYgMBu1Q5T-m2jNfrwF" />
		</div>
	</div>
	<div id="wrapper">
		<div class="box">
			 <img alt="Card image cap" class="card-img-top" src="http://www.fnstatic.co.uk/images/content/recipe/mini-christmas-cakes.jpg" />
		</div>	
		<div class="box">
			<img alt="Card image cap" class="card-img-top" src="https://i.pinimg.com/736x/32/6c/19/326c191b3b4a373d0b73189551b4a693--spider-man-cakes-spiders.jpg" />
		</div>
		<div class="box">
			<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqESHTW7PwOycYQucPrFkEaTPfdsIod7GYqm3fIUNyQUzHGiS0" />
		</div>	
	</div>
	<div id="wrapper">		
		<div class="box">
			 <img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" />
		</div>		
		<div class="box">
			<img alt="Card image cap" class="card-img-top" src="https://i.pinimg.com/736x/32/6c/19/326c191b3b4a373d0b73189551b4a693--spider-man-cakes-spiders.jpg" />
		</div>
		<div class="box">
			<img alt="Card image cap" class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0KuVORGDRBMrnC4j4oMm-TU_LmU2JZ0KLeDbD49h5Rt97dXTEEg" />
		</div>			
	</div>
</body>
</html>
</body>
</html>

【讨论】：