Jak zrobić, żeby DIV się nie zawijał?

179

Muszę utworzyć styl DIV kontenera, który zawiera wiele innych DIV. Pyta się, czy te DIV-y nie zawiną się, jeśli rozmiar okna przeglądarki będzie wąski.

Starałem się, aby działało 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. Znalazłem zmianę DIV kontenera na szerokość 3000px w RTL IE7; i okazuje się, że jest bałagan.

Czy istnieje inny sposób, aby kontener DIV nie zawijał się?

Morgan Cheng
źródło
dodałem ten tag: white-space: nowrap; i ten tag: text-overflow: ellipsis; do mojego kodu
szabla tabatabaee yazdi

Odpowiedzi:

245

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

notkwite
źródło
48

Jeśli nie chcę definiować minimalnej szerokości, ponieważ nie znam ilości elementów, jedyną rzeczą, która mi działała, było:

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

Ale tylko w Chrome i Safari: /

Fguillen
źródło
33

Poniższe działało dla mnie bez unoszenia się (nieco zmodyfikowałem twój przykład dla efektu wizualnego):

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

Div mogą być oddzielone spacjami. Jeśli nie chcesz tego, użyj margin-right: -4px;zamiast margin: 5px;do .slide(jest brzydki, ale jest to trudne do czynienia z problemem ).

JSideris
źródło
Świetna odpowiedź. Podałem podobny przykład poniżej, ale usunąłem go po tym, jak go zobaczyłem. Jeśli nie musisz obsługiwać IE9, możesz także użyć Flexboksa: jsfiddle.net/7gsrb38L/1
ValentinVoilean
Możesz użyć komentarzy HTML między divami, </div><!-- --><div class="slide">jeśli chcesz usunąć dodatkowe spacje między nimi. Styl bloku wstawianego powoduje, że białe znaki w kodzie są pobierane jako spacje w dokumencie HTML.
Jo.
@Jo. aby zmniejszyć rozmiar strony, możesz raczej użyć czegoś, co nie jest renderowane, np. podczas korzystania z php: </div><?php ?><div class="slide">renders jak </div><div class="slide">w kodzie źródłowym.
Fleuv,
Ponadto, jeśli generujesz kod HTML za pomocą JavaScript, możesz uniknąć spacji. Używam DOThtml . Powyższy kod HTML można zastąpić następującym:dot("body").div(dot.iterate(4, function(i){return dot.div("something something something something").class("slide");})).class("container")
JSideris,
30

Kombinacja, której potrzebujesz, to

white-space: nowrap

na rodzicu i

display: inline-block; // or inline

na dzieciach

Funkodebat
źródło
25

To działało 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/

Turako
źródło
To z przepełnieniem: ukryty zadziałało dla mnie. Dzięki.
Alfie,
10

overflow: hiddenpowinien dać ci właściwe zachowanie. Domyślam się, że RTLjest to pomieszane, ponieważ masz float: leftna sobie enkapsulowane div.

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

Yuval Adam
źródło
1
Sprawdzę, czy wynika to z „float: left” na enkapsulowanych divach. Ale ten sam kod działa dobrze w Firefox i Safari, tylko nie w IE. Tak więc naprawdę wątpię, aby tak było.
Morgan Cheng
2

Spróbuj użyć width: 3000px;w przypadku IE.

Andres GR
źródło
2

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

W moim przypadku musiałem dodać następujące elementy do utworzonej przeze mnie kontroli użytkownika:

display:inline-block;
J-DawG
źródło
1

możesz użyć

display: table;

dla twojego pojemnika i dlatego unikaj overflow: hidden;. Powinien to zrobić, jeśli użyłeś go tylko do wypaczenia.

Paka
źródło
0
<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>
Anil Khatour
źródło
0

Użyj display:flexiwhite-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}
<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>

Kishore
źródło
-1

<span>Tag służy do grupowania elementów inline w dokumencie.
(źródło)

Mikrofon
źródło
Chociaż jest to prawda, wydaje się, że w ogóle nie odnosi się do pytania.
Quentin,
To doskonale odpowiada na pytanie, ponieważ rozpiętość i podziałka są zawsze identyczne, z wyjątkiem tego, że podziałka jest owinięta, a rozpiętość nie. I możesz wdrożyć dowolne obejścia.
Mike
2
Czy to oznacza, że ​​twoja sugestia brzmi „Użyj zakresów zamiast div”? Ponieważ nie to powiedziałeś.
Quentin,