CSS | Stellen Sie div float nach rechts und fügen Sie die Bildlaufleiste zum übergeordneten Element hinzu.

Question

Ich habe einen übergeordneten Div-Container mit 5 divs darin. Das Eltern-Div ist 960 Pixel breit und 320 Pixel in der Höhe. Die inneren Elemente schweben links und haben eine eingestellte Breite.

Es gibt nicht genug Breite/Platz für 5 Elemente, um in das 960 breite Eltern-Div zu passen, so dass es natürlich das letzte div nach unten floaten lässt.

Gibt es eine Möglichkeit, es nach rechts schieben und fügen Sie eine Bildlaufleiste, um horizontal zu scrollen?

http://puu.sh/qiBKI/3f1d4c944a.png

Answer 1

Sie könnten white-space: nowrap und display: inline-block kombinieren, um die Elemente zu verhindern, eingewickelt werden. Fügen Sie overflow: scroll und das übergeordnete Element die Bildlaufleiste hinzu. Hier ein Beispiel:

.parent { 
 
    overflow: scroll; 
 
    background-color: lightblue; 
 
    white-space: nowrap; 
 
} 
 

 
.some-child { 
 
    width: 200px; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
</div>

.parent { 
    width: 100%; 
    overflow: scroll; 
}