How to position divs in Tumblr style [duplicate]

Question

How to position divs in Tumblr style [duplicate]

Navigation

#1 by (1 votes)

2

How can I position the divs in this way? Remembering that it does not position in vertical line, always in horizontal it will type fitting.

html css

asked by anonymous 06.04.2017 / 22:51

1 answer

Bubble sort in list Shell Script for file and directory localization

score 1 · Accepted Answer

Run the code and see the whole 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>Loremipsumdolorsitamet,consecteturadipiscingelit.</figcaption></figure></div><divclass="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg"><figcaption>Loremipsumdolorsitamet,consecteturadipiscingelit.</figcaption></figure></div><divclass="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg"><figcaption>Loremipsumdolorsitamet,consecteturadipiscingelit.</figcaption></figure></div><divclass="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg"><figcaption>Loremipsumdolorsitamet,consecteturadipiscingelit.Crasrisuselit,accumsansitametcommodorhoncus,dictumadiam.Aliquamlaoreetsitametlacusvelplacerat.</figcaption></figure></div><divclass="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg"><figcaption>Loremipsumdolorsitamet,consecteturadipiscingelit.</figcaption></figure></div><divclass="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg"><figcaption>Loremipsumdolorsitamet,consecteturadipiscingelit.Crasrisuselit,accumsansitametcommodorhoncus,dictumadiam.Aliquamlaoreetsitametlacusvelplacerat.</figcaption></figure></div><divclass="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg"><figcaption>Loremipsumdolorsitamet,consecteturadipiscingelit.</figcaption></figure></div><divclass="card">
			<figure>
				<img src="https://pixabay.com/static/uploads/photo/2016/01/28/19/40/photography-1166895_960_720.jpg"><figcaption>Loremipsumdolorsitamet,consecteturadipiscingelit.</figcaption></figure></div><divclass="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>