CODEWITHSUNDEEP
htmlcss
L. Akos
L. Akos

Reputation: 31

put and align equally pics in a row

Using the structure below, the pictures are not spaced evenly in the row.

On the image you see there are more space between the 2nd and 3rd image

I used the following code.

css:

img {
    max-width: 100%;
    margin: auto;
}

.grid {
    margin: 0 auto;
    max-width: 712px;
    width: 100%;
}

.row {
    width: 100%;
    display: flex;
}
.col-4 {
    width: 33.33%;
}
<div class="row" >
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder" align="left"></div>
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder" align="center"></div>
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder"  align="right"></div>
    </div>

the spaces among pictures are not equal PLS see image

Upvotes: 3

Views: 125

Answers (2)

Alex W
Alex W

Reputation: 38253

You can evenly space items with justify-content: space-between [reference]. The main issue with your code is the align attributes on the div elements. Align is fighting the other layout code and causing that strange spacing.

img {
    max-width: 100%;
    margin: auto;
}

.grid {
    margin: 0 auto;
    max-width: 712px;
    width: 100%;
}

.row {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.col-4 {
    flex: 1;
}
<div class="row" >
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder"></div>
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder"></div>
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder"></div>
    </div>

Upvotes: 1

McHat
McHat

Reputation: 860

I recommend using flexbox for this:

<div class="row pics-container" >
  <div class="col-4 pic-wrapper"><img src="images/thmb1.jpg"></div>
  <div class="col-4 pic-wrapper"><img src="images/thmb1.jpg"></div>
  <div class="col-4 pic-wrapper"><img src="images/thmb1.jpg"></div>
</div>


.pics-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.pic-wrapper {
  align-self: center;
}

A concise and detailed example page for this CSS technique exists here: Flexbox Playground

Upvotes: 1

Related Questions