CSS – Divs horizontal ausrichten

Question

Ich habe ein Container-Div mit fester Breite und Höhe und Überlauf:versteckt.

Ich möchte eine horizontale Float-Reihe:linke Divs in diesem Container.Divs, die nach links verschoben werden, werden natürlich auf die darunter liegende „Linie“ verschoben, nachdem sie die rechte Grenze ihres übergeordneten Elements gelesen haben.Dies geschieht auch dann, wenn die Körpergröße des Elternteils dies nicht zulassen sollte.So sieht das aus:

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

Wie ich es gerne hätte:

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

Notiz:Der gewünschte Effekt kann durch die Verwendung von Inline-Elementen und Leerzeichen erzielt werden:No-Wrap (so habe ich es im gezeigten Bild gemacht).Das nützt mir jedoch nichts (aus Gründen, die zu ausführlich sind, um sie hier zu erklären), da die untergeordneten Divs schwebende Elemente auf Blockebene sein müssen.

Answer 1

Sie können ein inneres Div in den Container einfügen, 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>

Answer 2

style="overflow:hidden" für Eltern div Und style="float: left" für das ganze Kind divs sind wichtig, um das zu machen divs Für alte Browser wie IE7 und niedriger horizontal ausrichten.

Für moderne Browser können Sie verwenden style="display: table-cell" für das ganze Kind divs und es würde horizontal richtig gerendert werden.

Answer 3

du kannst den ... benutzen clip Eigentum:

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

beachten Sie das position: absolute Und overflow: hidden benötigt, um zu bekommen clip arbeiten.

Answer 4

Dies scheint Ihren Wünschen nahe zu kommen:

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

Answer 5

Schweben:links, Anzeige: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

Answer 6

Sie können jetzt CSS-Flexbox verwenden, um Divs bei Bedarf horizontal und vertikal auszurichten.Die allgemeine Formel sieht so aus

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

Answer 7

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