Reputation: 19

Lining up images both vertically and horizontally (CSS)

I've tried a couple of solutions for this problem, but none seems to work.

I want to achieve a rather simple thing: line up images horizontally and vertically, so that empty spaces get filled with photos. Like this: https://placekitten.com/

I can't seem to find a way to display images on top of another.

.photos {
  white-space: nowrap;
  position: relative;
  width: 50%;
  margin: 2px;
}
.photos img {
  position: absolute;
  display: inline;
  vertical-align: top;
  padding: 2px;
  margin: 5px;
}

<div class="photos">
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />

  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg" />

  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" />
</div>

<div class="photos">
  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />
</div>

I'm learning, and I need to find a way without using Javascript. I think it must be some work with a container div being relative, with images being blocks with absolute.

I think there is a way to do it with < li >, although I don't know which is, and also I don't consider it the best way possible. Can you help me?

EDIT: After noticing my CSS wasn't linked, I actually got my idea to work, but I still can't manage to stop images from repositioning themselves when shrinking or enlarging -

.photos {
    width: 70%;
    min-width: 
    height: auto;
    margin: 5px auto;
    position: relative;
    }

.photos h {
    font-family: "Cooper STD", "Times", Courier, sans-serif;
     display: inline-block;
  float: left;
  margin: auto;
  margin-top: 5px;
  max-width: initial;
  position: relative;
}

.photos img {
  display: inline-block;
  float: left;
  margin: 5px;
  margin-bottom: 5px;
  max-width: 70%;
  position: inherit;
}

* {
    box-sizing: border-box;
}

<div class="photos">
<div class="box">
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
  <h>Foto gattini</h>
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg" />

  <img src="http://i.ytimg.com/u/oxV7JbqVE-ZdnOYL0l3vIw/channels4_banner.jpg?v=516733c3" alt="" />
  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />
  <h>Questa e' una griglia responsive d'immagini</h>
     <img src="http://bit.ly/PiQUaV" alt="" />
     </div>
</div>

Upvotes: 1

Answers (2)

caldera.sac

Reputation: 5088

I think this is what you want.I only created grids.you only have to put your images into it.just put your img tags inside grid and give it's width and height 100%.hope this will help to you.cheers!!

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>align</title>

<style type="text/css">
  body{
  	margin: 0;
  	padding: 0;
  }

  div.maincontainer{
  	width: 60%;
  	height: auto;
  	position: absolute;
  	left: 20%;
  	background-color: black;
  }
  div.rowone{
  	width: 100%;
  	height: 320px;
  	background-color: brown;
  	position: absolute;
  }

  div.description{
  	width: 50%;
  	height: 100%;
  	background-color: orange;
  	position: absolute;

  }

  div.imagetwo
  {
  	width: 25%;
  	height: 100%;
  	background-color: pink;
  	position: absolute;
  	left: 50%;
  }

  div.twoimages{
  	width: 25%;
  	height: 100%;
  	background-color: purple;
  	position: absolute;
  	left: 75%;
  }

  div.oneimage{
  	width: 100%;
  	height: 50%;
  	background-color: green;
  }

  div.twoimage{
  	width: 100%;
  	height: 50%;
  	background-color: blue;
  }

  div.rowtwo{
  	width: 100%;
  	height: 320px;
  	background-color: gray;
  	position: absolute;
  	top: 330px;
  }


  div.iimageone{
  	width: 50%;
  	height: 100%;
  	background-color: yellow;
  	position: absolute;
  }

  div.ithreeimages{
  	width: 25%;
  	height: 100%;
  	background-color: pink;
  	position: absolute;
  	left: 50%;
  }

  div.timageone{
  	width: 50%;
  	height: 50%;
  	background-color: blue;
  	position: absolute;
  }
  div.timagetwo
  {
  	width: 50%;
  	height: 50%;
  	background-color: orange;
  	position: absolute;
  	left: 50%;
  }

  div.timagethree{
  	width: 100%;
  	height: 50%;
  	background-color: purple;
  	position: absolute;
  	top: 50%;
  }

div.finalimage{
	width: 25%;
	height: 100%;
	background-color: red;
	position: absolute;
	left: 75%;
}
</style>

</head>

<body>

 <div class="maincontainer">
 	<div class="rowone">
      <div class="description"></div>
      <div class="imageone"></div>
      <div class="imagetwo"></div>
      <div class="twoimages">
         <div class="oneimage"></div>
         <div class="twoimage"></div>
      </div>
 	</div>

    <div class="rowtwo">
       <div class="iimageone"></div>
       <div class="ithreeimages">
	       	<div class="timageone"></div>
	       	<div class="timagetwo"></div>
	       	<div class="timagethree"></div>
       </div>
       <div class="finalimage"></div>
    </div>


 </div>


</body>
</html>

Upvotes: 1

andnowchris

Reputation: 149

If you use a grid then you can stack them however you want. I'm not sure if you are using any frameworks but bootstrap and foundation makes it very easy to position things like this. You would stack rows and organize the pictures in columns withing said rows. Here is a great tutorial on using grids Grid Systems

Upvotes: 0

Lining up images both vertically and horizontally (CSS)

Answers (2)

Related Questions