Frage Begründen Sie Elemente mit Fixplatz (variable Breite)


Ich habe einen Container mit einer variablen Anzahl von Elementen darin. Die Elemente sollten gerechtfertigt sein, aber mit einem festen Abstand zwischen (z. 20px). Das bedeutet, dass sich die Breite jedes Elements anpassen muss.

Zum Beispiel:

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%;
}

Am Ende sollte es so aussehen (dieses Bild zeigt zwei Beispiele: 2 Elemente und 3 Elemente; die Breite ist dynamisch, aber das Leerzeichen fix [20px]):

picture showing elements

Es sollte mit einem funktionieren unterschiedliche Anzahl von Kindelementen.

Gibt es eine professionelle Möglichkeit, dies mit CSS zu tun?

BEARBEITEN: Ich sollte erwähnen, dass dieser Fixplatz ein% -Wert ist!


5
2017-08-29 12:01


Ursprung


Antworten:


Wenn Sie verwenden Flexbox ist eine Option, die Sie hinzufügen könnten flex: 1 zu den Flex-Elementen und auch eine Margin-Eigenschaft mit einem festen Wert wie folgt:

BEISPIEL HIER

div.container { display: flex; }

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

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

Tatsächlich, flex: 1 ist eine Kurzform von flex-grow: 1; in diesem Fall.


4
2017-08-29 12:12



Sie können verwenden display: table und display: table-cell dafür:

.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>


3
2017-08-29 12:14