CSS - Make Divs horizontal ausrichten

Question

Ich habe ein Container Div mit einer festen Breite und Höhe, mit Überlauf: versteckt.

Ich möchte eine horizontale Reihe von float: linken Divs in diesem Container. Divs, die nach links schweben, drücken natürlich auf die "Linie", nachdem sie die rechte Grenze ihres Elternteils gelesen haben. Dies wird auch dann passieren, wenn die Höhe des Elternteils dies nicht zulassen sollte. Dies ist, wie folgt aussieht:

[Wrong] [1] - entfernt Bild Hütte Bild, das durch eine Anzeige ersetzt worden war

Wie ich würde es aussehen mögen:!

[Recht ] [2] - entfernt Bild Hütte Bild, das durch eine Anzeige

Hinweis ersetzt worden war: der Effekt, den ich will, kann erreicht werden durch Verwendung von Inline-Elementen & white-space: no-Wrap (das ist, wie ich es tat in dem Bild gezeigt). Dies ist jedoch nicht gut für mich (aus Gründen, die zu langwierig sind, um es hier zu erklären), da die Kind-Divs blockierte Level-Elemente sein müssen.

Answer 1

Sie können ein inneres div in den Container einfügen, das breit genug ist, um alle Floated 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

Dies scheint nahe, 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>

Answer 3

Sie die clip Eigenschaft verwenden:

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

Note der position: absolute und overflow: hidden benötigt, um clip zu erhalten arbeiten.

Answer 4

style="overflow:hidden" für Eltern div und style="float: left" für all das Kind divs sind wichtig, um die divs align horizontal für alten Browser wie IE7 und unten zu machen.

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

Answer 5

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

Answer 6

Float: links, Anzeige: Inline-Block kann beide Elemente nicht horizontal ausrichten, wenn sie die Breite des Containers überschreiten.

Es ist wichtig, dass der Behälter, wenn die Elemente horizontal angezeigt werden muss wickeln sollte nicht zu beachten: white-space: nowrap

Answer 7

Sie jetzt css Flexbox divs horizontal und vertikal ausrichten können, wenn Sie benötigen.allgemeine Formel geht so

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 */ ; 
}