CSS - Divs horizontal ausrichten

Ich habe einen Container div mit einem festen widthund heightmit overflow: hidden.

Ich möchte eine horizontale Reihe von float: left divs in diesem Container. Divs, die nach links schweben, werden natürlich auf die 'Linie' unten gedrückt, nachdem sie die rechte Grenze ihres Elternteils gelesen haben. Dies wird auch dann passieren, wenn heightder Elternteil dies nicht zulassen sollte. So sieht das aus:

! [Falsch] [1] - Bild-Shack-Bild entfernt, das durch eine Anzeige ersetzt wurde

Wie es aussehen soll:

! [Rechts] [2] - Bild-Shack-Bild entfernt, das durch eine Anzeige ersetzt wurde

Hinweis: Der gewünschte Effekt kann durch Verwendung von Inline-Elementen & erzielt werden white-space: no-wrap(so habe ich es im gezeigten Bild gemacht). Dies ist jedoch nicht gut für mich (aus Gründen, die zu lang sind, um es hier zu erklären), da die untergeordneten Divs Elemente auf Blockebene sein müssen.

Sie können ein inneres Div in den Container legen, das breit genug ist, um alle schwebenden Divs aufzunehmen.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

style="overflow:hidden"Für Eltern divund style="float: left"für alle Kinder ist divses wichtig, die divsAusrichtung für alte Browser wie IE7 und darunter horizontal vorzunehmen .

Für moderne Browser können Sie style="display: table-cell"für alle Kinder verwenden divsund es würde horizontal richtig rendern.

Dies scheint nahe an dem zu liegen, was Sie wollen:

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}

<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Sie können die clipEigenschaft verwenden:

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

Beachten Sie die position: absoluteund overflow: hiddenbenötigt, um clipzur Arbeit zu kommen.

Float: left, display: inline-block kann die Elemente nicht horizontal ausrichten, wenn sie die Breite des Containers überschreiten.

Es ist wichtig zu beachten, dass der Container nicht umbrochen werden sollte, wenn die Elemente horizontal angezeigt werden MÜSSEN: white-space: nowrap

Sie können jetzt die CSS-Flexbox verwenden, um Divs bei Bedarf horizontal und vertikal auszurichten. Die allgemeine Formel lautet wie folgt

parent-div {
  display: flex;
  flex-wrap: wrap;
  /* for horizontal aligning of child divs */
  justify-content: center;
  /* for vertical aligning */
  align-items: center;
}

child-div {
  width: /* yoursize for each div */
  ;
}

Schwebe sie nach links. Zumindest in Chrome benötigen Sie keinen Wrapper id="container", im Beispiel von LucaM.

Sie können so etwas tun:

#container {
  background-color: red;
  width: 200px;
}

.child {
  background-color: blue;
  width: 150px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>