5

I have a container with a variable number of elements in it. The elements should be justified but with a fix space between (e.g. 20px). That means the width of every element has to adapt.

For example this:

HTML

<div class="container">
    <div>
        <img src="...">
    </div>
    <div>
        <img src="...">
    </div>
    <div>
        <img src="...">
    </div>
</div>

CSS

div.container {
    text-align: justify;
}

div.container div {
    display: inline-block;
    margin-right: 20px;
}

div.container div img {
    width: 100%;
}

At the end it should look like this (this picture shows two examples: 2 elements and 3 elements; the width is dynamic but the space fix [20px]):

picture showing elements

It should work with a different number of child elements.

Is there a professional way to do this with CSS?

EDIT: I should mention that this fix space is a %-value!

Salman A
  • 262,204
  • 82
  • 430
  • 521
Luca Nate Mahler
  • 1,292
  • 2
  • 13
  • 28

2 Answers2

4

If using Flexbox is an option, you could add flex: 1 to the flex items and also a margin property with a fixed value as follows:

EXAMPLE HERE

div.container { display: flex; }

div.container div {
  height: 50px; /* Just for demo */
  flex: 1;
  margin-left: 20px;
}

div.container :first-child { margin-left: 0; }

Actually, flex: 1 is a shorthand of flex-grow: 1; in this case.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • flexbox is not supported in IE8 and IE9, I suppose using the table is a better idea as @Salman did in his answer. – 4dgaurav Aug 29 '14 at 12:21
  • @4dgaurav That's why I started my answer with `If using Flexbox is an option...` :) – Hashem Qolami Aug 29 '14 at 12:23
  • Thank you for your great answer, it works perfect. Of course the IE8 and IE9 is a problem, but it's awesome. I can't use the table-cell-solution because my fix space is a percentage-value. – Luca Nate Mahler Aug 29 '14 at 12:23
  • +1 @HashemQolami Yes I saw that..:) your answer is a great solution to the problem if IE9 is not needed. – 4dgaurav Aug 29 '14 at 12:26
3

You can use display: table and display: table-cell for this:

.container {
  display: table;
  width: 100%;
  border-spacing: 10px 0;
  border-collapse: separate;
  background: palevioletred;
}
.container div {
  display: table-cell;
}
.container img {
  display: block;
  width: 100%;
  height: auto;
}
<div class="container">
  <div><img src="//dummyimage.com/200x100/000/CCC"></div>
  <div><img src="//dummyimage.com/300x100/000/CCC"></div>
  <div><img src="//dummyimage.com/400x100/000/CCC"></div>
</div>
<hr/>
<div class="container">
  <div><img src="//dummyimage.com/200x100/000/CCC"></div>
  <div><img src="//dummyimage.com/400x100/000/CCC"></div>
</div>
<hr/>
<div class="container">
  <div><img src="//dummyimage.com/600x100/000/CCC"></div>
</div>
Salman A
  • 262,204
  • 82
  • 430
  • 521
  • Edit: I should mention that this fix space is a %-value! – Luca Nate Mahler Aug 29 '14 at 12:25
  • @LucaNateMahler: you can add a padding on table cells instead of boder spacing. However, the first and last cells will have unnecessary padding on left and right side respectively. See http://jsfiddle.net/salman/937vb7hj/3/ – Salman A Aug 29 '14 at 12:41
  • @LucaNateMahler: there is a solution that uses two additional divs to "clip" the first and last padding. Revising answer. – Salman A Aug 29 '14 at 13:02
  • @Salman A: Thank your very much. I think I will use the Flex-method. Because I forgot to mention that there are elements which are big like 2 elements. – Luca Nate Mahler Aug 29 '14 at 13:11