CODEWITHSUNDEEP
css
3D-kreativ
3D-kreativ

Reputation: 9319

Four columns in a row

I have four small images in a row like a menu on the start page which goes to sub pages. The images a placed like this:

image space image space image space image

But I don't get an equl space before the last image! Is there a way to solve this? All images are placed in a container that has a width of 100%.

I use the CSS like this:

.one-fourth {
width: 24%;
float: left;
margin-right: 1%;

}

.last {
margin-right: 0%;
float: right;
}

The fourth and last image also has the class .last

Upvotes: 1

Views: 673

Answers (5)

David Mann
David Mann

Reputation: 2270

An easy way to do this is to use flexbox. Just have the parent set to display: flex and justify-content: space-between. All children will be set into a row (flexbox's default setting). Just set each image's width to a bit less than 25%. Otherwise there will be no space between each one. If you really want exactly 1% between each one then set the width using calc to width: calc(97% / 4).

I've used a simple css reset to make the effect more clear.

* {
  margin: 0;
  padding: 0;
}

section {
  display: flex;
  justify-content: space-between;
}

.one-fourth {
  width: calc(97% / 4);
}
<section>
  <img src="http://lorempixum.com/200/200/city" alt="Lorem Ipsum" class="one-fourth"/>
  <img src="http://lorempixum.com/200/200/sports" alt="Lorem Ipsum" class="one-fourth"/>
  <img src="http://lorempixum.com/200/200/people" alt="Lorem Ipsum" class="one-fourth"/>
  <img src="http://lorempixum.com/200/200/nature" alt="Lorem Ipsum" class="one-fourth"/>
</section>

For more on flexbox here's a snippet from css-tricks, and the support tables.

Upvotes: 1

dingo_d
dingo_d

Reputation: 11690

This is how I'd do it:

.wrapper {
  display: block;
  width: 100%;
}
.wrapper:before,
.wrapper:after {
  content: " ";
  display: table;
}
.wrapper:after {
  clear: both;
}
.one-fourth {
  width: 24%;
  float: left;
  margin-right: 1.333333%;
  background: red;
  height: 100px;
  margin-bottom: 1.333333%;
}
.last {
  margin-right: 0;
}
<div class="wrapper">
  <div class="one-fourth">asasdasds</div>
  <div class="one-fourth">rtzrtzrtzr</div>
  <div class="one-fourth">uizuizui</div>
  <div class="one-fourth last">xcvxcvxcvxcv</div>
  <div class="one-fourth">dsfsdfsfsfsdf</div>
  <div class="one-fourth">xcvxcvxvc</div>
  <div class="one-fourth">werwrewerwe</div>
  <div class="one-fourth last">werwerwer</div>
  <div class="one-fourth">werwerwe</div>
  <div class="one-fourth">werwrwerwe</div>
</div>

Upvotes: 2

Andr&#233; R.
Andr&#233; R.

Reputation: 1657

your last class floats right ... and you have not set the width explicitly for class last ... this worked for me

.one-fourth {
width: 24%;
float: left;
margin-right: 1%;
}

.last {
width: 25%;
float: left;
margin-right: 0%;
}

Upvotes: 0

smnbbrv
smnbbrv

Reputation: 24581

There is an easy cross-browser way to do that using text-align: justify:

On the container and all children:

.container {
  text-align: justify;
}

.container > * {
  display: inline-block;
}

Now create in the end of your container one more element, e.g. div with class last-text-line:

.last-text-line {
  width: 100%;
}

That will force your images to stretch to the whole width of the container with automatically generated margins. You won't even need to separate them by classes.

Fiddle

How it works: justify tries to stretch the text to the width given. But the last row is always not stretched. That is fixed by our last element with 100% width - it is becoming the last row and the rows above are stretched to the given width.

Upvotes: 0

cgee
cgee

Reputation: 1897

Without an example it's hard. But works this for you?

.one-fourth {
width: 24%;
float: left;
margin-right: 1%;
box-sizing: border-box;
}
.one-fourth:last-child {
margin-right:0%;
}

Upvotes: 0

Related Questions