Come fare un DIV non avvolgere?

Devo creare uno stile DIV contenitore che contenga più altri DIV. Si chiede che questi DIV non si chiudano se la finestra del browser viene ridimensionata per essere stretta.

Ho provato a farlo funzionare come di seguito.

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

Questo funziona nella maggior parte dei casi. Tuttavia, in alcuni casi speciali, il rendering non è corretto. Ho trovato il contenitore DIV cambiare alla larghezza di 3000 px in RTL di IE7; e diventa disordinato.

Esiste un altro modo per rendere un contenitore DIV da non avvolgere?

Prova a utilizzare white-space: nowrap;nello stile contenitore (anziché overflow: hidden;)

Se non voglio definire una larghezza minima perché non conosco la quantità di elementi, l'unica cosa che mi ha funzionato è stata:

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

Ma solo in Chrome e Safari: /

Quanto segue ha funzionato per me senza virgola mobile (ho modificato un po 'il tuo esempio per effetto visivo):

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

I div possono essere separati da spazi. Se non vuoi questo, usa margin-right: -4px;invece di margin: 5px;for .slide(è brutto ma è un problema difficile da affrontare ).

La combinazione di cui hai bisogno è

white-space: nowrap

sul genitore e

display: inline-block; // or inline

sui bambini

Questo ha funzionato per me:

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

overflow: hiddendovrebbe darti il ​​comportamento corretto. La mia ipotesi è che RTLè incasinato perché hai float: lefti messaggi incapsulati div.

Oltre a quel bug, hai il comportamento giusto.

Prova a utilizzare width: 3000px;per il caso di IE.

Nessuna delle precedenti ha funzionato per me.

Nel mio caso, avevo bisogno di aggiungere quanto segue al controllo utente che avevo creato:

display:inline-block;

La min-widthproprietà non funziona correttamente in Internet Explorer, che è probabilmente la causa dei tuoi problemi.

Leggi le informazioni e un brillante script che risolve molti problemi CSS di IE .

Puoi usare

display: table;

per il vostro contenitore e quindi evitare il overflow: hidden;. Dovrebbe fare il lavoro se lo hai usato solo per scopi di deformazione.

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

Usa display:flexewhite-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>

Il <span>tag viene utilizzato per raggruppare elementi incorporati in un documento.
(fonte)