CSS - Divs horizontal ausrichten

84

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.

Robin Barnes
quelle
8
Ihre Bildlinks scheinen defekt zu sein. Wenn Sie die Originale noch haben, laden Sie sie bitte erneut auf stack.imgur hoch. Vielen Dank!
Ilmari Karonen

Antworten:

99

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>

LucaM
quelle
Wie kann ich dann das äußere Div-Zentrum machen? Ich habe versucht, align = "center" auf dem Outter Div hinzuzufügen, scheint nicht zu funktionieren.
Hakamami
1
Dies funktioniert auch für prozentuale Breiten. In meinem Fall verwende ich ein Container-Div mit width: 200%;und die untergeordneten Elemente sind jeweils width: 50%;. Ich kann dann transform: translateX(n%);auf dem Container einen Karusselleffekt emulieren, solange ich einen übergeordneten Container mitoverflow: hidden;
evolross
31

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.

Kwex
quelle
6

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>

Sören Kuklau
quelle
5

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.

fcurella
quelle
4
Was unterstützt der Browser des Clips?
Alex
1
Von w3schools.com/cssref/pr_pos_clip.asp : Die Clip-Eigenschaft wird in allen gängigen Browsern unterstützt. Hinweis: Der Wert "erben" wird in IE7 und früheren Versionen nicht unterstützt. IE8 benötigt einen! DOCTYPE. IE9 unterstützt "erben".
Dsomnus
4

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

William B.
quelle
3

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 */
  ;
}
Sriram Hegde
quelle
1

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

Wolfpack'08
quelle
0

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>

Manjuboyz
quelle