如何在css中设置网格像pinterest

时间：2016-07-20 07:51:03

标签： html css twitter-bootstrap

这是我的代码

<div class='col-lg-3 aa'>
  <div class='panel panel-default'>
    <img class='img-responsive' src='gambar1'>
      <div class='panel-body'>
         <small>
           <img style='border-radius: 20%; width: 30px; height: 30px;' src='".base_url()."assets/images/profile/".$foto_user."'>
           <h5 style='margin-top: -30px; margin-left: 40px;'>".$value->nama."</h5><br>
           <i style='position: absolute; margin-top: -30px; margin-left: 40px;'>".$tanggal."</i>
           <p>".$value->deskripsi_laporan."</p>
         </small>
      </div>
 </div>
</div>

我使用bootstrap，这是我的显示器。 image

我希望像pinterest一样展示它，请帮我把我的显示看起来像pinterest ..

2 个答案:

答案 0 :(得分：0)

尝试这种方式：

＆＃13;
＆＃13; 
	width: 90%;
	max-width: 1100px;
	min-width: 800px;
	margin: 50px auto;
}

#columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-fill: auto;
	column-count: 3;
	column-gap: 15px;
	column-fill: auto;
}

.pin {
	display: inline-block;
	background: #FEFEFE;
	border: 2px solid #FAFAFA;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	padding: 15px;
	padding-bottom: 5px;
	background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
	opacity: 1;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

.pin img {
	width: 100%;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

.pin p {
	font: 12px/18px Arial, sans-serif;
	color: #333;
	margin: 0;
}

@media (min-width: 960px) {
	#columns {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;
	}
}

@media (min-width: 1100px) {
	#columns {
		-webkit-column-count: 5;
		-moz-column-count: 5;
		column-count: 5;
	}
}

#columns:hover .pin:not(:hover) {
	opacity: 0.4;
}

<div id="wrapper">
＆＃13; 
#wrapper {
<div id="columns">
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Sed feugiat consectetur pellentesque. Nam ac elit risus, 
				ac blandit dui. Duis rutrum porta tortor ut convallis.
				Duis rutrum porta tortor ut convallis.
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
			<p>
				Donec a fermentum nisi. 
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
			<p>
				Nullam eget lectus augue. Donec eu sem sit amet ligula 
				faucibus suscipit. Suspendisse rutrum turpis quis nunc 
				convallis quis aliquam mauris suscipit.
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
			<p>
				Nullam eget lectus augue. Donec eu sem sit amet ligula 
				faucibus suscipit. Suspendisse rutrum turpis quis nunc 
				convallis quis aliquam mauris suscipit.
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
			<p>
				Donec a fermentum nisi. Integer dolor est, commodo ut 
				sagittis vitae, egestas at augue. 
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Sed feugiat consectetur pellentesque. Nam ac elit risus, 
				ac blandit dui. Duis rutrum porta tortor ut convallis.
				Duis rutrum porta tortor ut convallis.
			</p>
		</div>	
		
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
			<p>
				Nullam eget lectus augue. Donec eu sem sit amet ligula 
				faucibus suscipit. Suspendisse rutrum turpis quis nunc 
				convallis quis aliquam mauris suscipit.
				Duis rutrum porta tortor ut convallis.
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
			<p>
				Nullam eget lectus augue. 
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Sed feugiat consectetur pellentesque. 
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
			<p>
				Donec a fermentum nisi. Integer dolor est, commodo ut 
				sagittis vitae, egestas at augue. Suspendisse id nulla 
				ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
			<p>
				Donec a fermentum nisi. Integer dolor est, commodo ut 
				sagittis vitae, egestas at augue. Suspendisse id nulla 
				ac urna vestibulum mattis. 
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Sed feugiat consectetur pellentesque. Nam ac elit risus, 
				ac blandit dui. Duis rutrum porta tortor ut convallis.
			</p>
		</div>	
		
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
			<p>
				Donec a fermentum nisi. Integer dolor est, commodo ut 
				sagittis vitae, egestas at augue. Suspendisse id nulla 
				ac urna vestibulum mattis. 
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
			<p>
				Donec a fermentum nisi. Integer dolor est, commodo ut 
				sagittis vitae, egestas at augue. Suspendisse id nulla 
				ac urna vestibulum mattis. 
			</p>
		</div>
	
		<div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Sed feugiat consectetur pellentesque. Nam ac elit risus, 
				ac blandit dui. Duis rutrum porta tortor ut convallis.
			</p>
		</div>
	</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

你可以通过bootstrap来做到这一点 click here

相关问题
最新问题