How to position Ivs in Tumblr style

Asked

Viewed 93 times

2

How can I position the Divs this way? Remembering that it does not position in vertical line, always in horizontal it goes kind of fitting.

inserir a descrição da imagem aqui

html css

  • Have you tried using the flex-wrap: wrap; CSS property? I’m not sure it gives the same effect.

1 answer

1


Run the code and see in the entire page:

*{ 
	margin: 0px;	
	padding: 0px;
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#columns {
	column-width: 320px;
  -moz-column-width: 320px;
  -webkit-column-width: 320px;
	column-gap: 15px;
  -moz-column-gap: 15px;
  -webkit-column-gap: 15px;
 	width: 90%;
	max-width: 1100px;
	margin: 50px auto;
  text-align: center;
}

#columns .card {
  width: 355px;
	background: #fefefe;
	border: 2px solid #fcfcfc;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	padding: 15px;
	padding-bottom: 10px;
	transition: opacity .4s ease-in-out;
  display: inline-block;
  -webkit-column-break-inside:avoid;
  -moz-column-break-inside:avoid;
  -o-column-break-inside:avoid;
  -ms-column-break-inside:avoid;
   column-break-inside:avoid;
}

img{
  max-width:100%;
}

figcaption{
  font-family: "arial", sans-serif;
	font-size: 17px;
}
<div id="columns">
		<div class="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg">
				<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
			</figure>
		</div>
		<div class="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg">
				<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
			</figure>
		</div>
		<div class="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg">
				<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
			</figure>
		</div>
		<div class="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg">
				<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus elit, accumsan sit amet commodo rhoncus, dictum a diam. Aliquam laoreet sit amet lacus vel placerat. </figcaption>
			</figure>
		</div>
		<div class="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg">
				<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
			</figure>
		</div>
		<div class="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg">
				<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus elit, accumsan sit amet commodo rhoncus, dictum a diam. Aliquam laoreet sit amet lacus vel placerat. </figcaption>
			</figure>
		</div>
		<div class="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg">
				<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
			</figure>
		</div>
		<div class="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg">
				<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
			</figure>
		</div>
		<div class="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg">
				<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
			</figure>
		</div>
	</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.