Jak zrobić DIV nie zawijać?

Question

Potrzebuję utworzyć styl DIV kontenera, który zawiera wiele innych DIV. Pojawia się pytanie, czy te DIV nie będą się zawijać, jeśli wielkość okna przeglądarki zostanie zmniejszona.

Próbowałem zrobić to jak poniżej.

<style> 
    .container 
    { 
     min-width: 3000px; 
     overflow: hidden; 
    } 
    .slide 
    { 
     float: left; 
    } 
</style> 
<div class="container"> 
    <div class="slide">something</div> 
    <div class="slide">something</div> 
    <div class="slide">something</div> 
    <div class="slide">something</div> 
</div> 

Działa to w większości przypadków. Jednak w niektórych szczególnych przypadkach renderowanie jest nieprawidłowe. Zauważyłem, że DIV kontenera zmienia się na 3000px szerokości w RTL IE7; i staje się brudny.

Czy istnieje inny sposób na zapobieganie zawijaniu pojemnika DIV?

Answer 1

overflow: hidden powinien dać ci prawidłowe zachowanie. Domyślam się, że RTL jest pomieszany, ponieważ masz float: left na enkapsulowanych div s.

Oprócz tego błędu, masz odpowiednie zachowanie.

Answer 2

Właściwość min-width nie działa poprawnie w programie Internet Explorer, co jest najprawdopodobniej przyczyną problemów.

Czytaj info i a brilliant script that fixes many IE CSS problems.

Answer 3

Spróbuj użyć white-space: nowrap; w stylu pojemnika (zamiast overflow: hidden;)

Answer 4

spróbować użyć width: 3000px; dla przypadku IE.

Answer 5

Jeśli nie chcesz, aby określić minimalną szerokość bo nie wiem ilość elementów jedyną rzeczą, która pracowała dla mnie brzmiało:

display: inline-block; 
white-space: nowrap; 

Ale tylko w Chrome i Safari:/

Answer 6

następujące pracował dla mnie bez pływających (I zmodyfikowany przykład trochę za efekt wizualny):

.container 
 
{ 
 
    white-space: nowrap; /*Prevents Wrapping*/ 
 
    
 
    width: 300px; 
 
    height: 120px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
} 
 
.slide 
 
{ 
 
    display: inline-block; /*Display inline and maintain block characteristics.*/ 
 
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/ 
 
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/ 
 
    
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin: 5px; 
 
}

<div class="container"> 
 
    <div class="slide">something something something</div> 
 
    <div class="slide">something something something</div> 
 
    <div class="slide">something something something</div> 
 
    <div class="slide">something something something</div> 
 
</div>

Elementy div mogą być oddzielone spacjami. Jeśli nie chcesz tego, użyj margin-right: -4px; zamiast margin: 5px; dla .slide (jest brzydki, ale it's a tricky problem to deal with).

Answer 7

można użyć

display: table; 

do pojemnika i therfore uniknąć overflow: hidden;. Powinien wykonać to zadanie, jeśli używałeś go tylko do celów wypaczania.

Answer 8

Żadne z powyższych nie działało dla mnie.

W moim przypadku musiałem dodać następujące kontrolą użytkownika stworzył:

display:inline-block; 

Answer 9

Znacznik <span> służy do grupowania elementów inline w dokumencie.
(source)

Answer 10

Ten pracował dla mnie:

.container { 
 
    display: inline-flex; 
 
} 
 

 
.slide { 
 
    float: left; 
 
}

<div class="container"> 
 
    <div class="slide">something1</div> 
 
    <div class="slide">something2</div> 
 
    <div class="slide">something3</div> 
 
    <div class="slide">something4</div> 
 
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 11

Combo trzeba to

white-space: nowrap 

od rodzica i

display: inline-block; // or inline 

na dzieci