如何将图像放在另一张图像下面？

时间：2018-01-18 07:05:39

标签： html css css3 codeigniter

我想将图片设置为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 for images 

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

3 个答案:

答案 0 :(得分：0)

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

  

设置框height:auto，以便自动设置所有Box的高度

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我尝试在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 :(得分：0)

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

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

相关问题
最新问题