Nasıl bir DIV sarmak değil?

Birden fazla diğer DIV içeren bir konteyner DIV stil oluşturmak gerekir. Tarayıcı penceresi dar olacak şekilde yeniden boyutlandırılırsa bu DIV'lerin kaydırılmaması istenir.

Aşağıdaki gibi çalışmasını sağladım.

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

Bu çoğu durumda işe yarar. Ancak, bazı özel durumlarda oluşturma işlemi yanlıştır. Konteyner DIV değişikliğini IE7'nin RTL'sinde 3000 piksel genişliğe buldum; ve dağınık oluyor.

Bir konteyner DIV'nin sarılmamasını sağlamanın başka bir yolu var mı?

white-space: nowrap;Kapsayıcı stilinde kullanmayı deneyin (yerine overflow: hidden;)

Minimal bir genişlik tanımlamak istemezsem, çünkü bana çalışan tek şey elementlerin miktarını bilmiyorum:

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

Ancak yalnızca Chrome ve Safari'de: /

Aşağıdakiler yüzer olmadan benim için çalıştı (örneğinizi görsel efekt için biraz değiştirdim):

.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'ler boşluklarla ayrılabilir. Bunu istemiyorsanız margin-right: -4px;, margin: 5px;for yerine kullanın .slide(çirkin ama başa çıkmak zor bir sorundur ).

İhtiyacınız olan kombinasyon

white-space: nowrap

ebeveyn üzerinde ve

display: inline-block; // or inline

çocuklarda

Bu benim için çalıştı:

.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: hiddensize doğru davranışı vermelidir. Benim tahminim bu RTLberbat çünkü float: leftkapsüllenmiş divs üzerinde var .

Bu hatanın yanı sıra, doğru davranışa sahip olursunuz.

width: 3000px;IE için kullanmaya çalışın .

Yukarıdakilerin hiçbiri benim için çalışmadı.

Benim durumumda, oluşturduğum kullanıcı denetimine aşağıdakileri eklemem gerekiyordu:

display:inline-block;

min-widthMülkiyet büyük olasılıkla sorunların nedenidir Internet Explorer, düzgün çalışmaz.

Birçok IE CSS sorununu çözen bilgileri ve parlak bir betiği okuyun .

kullanabilirsiniz

display: table;

konteyner için ve bu nedenle kaçının overflow: hidden;. Sadece çarpıtma amacıyla kullandıysanız bu işi yapmalıdır.

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

Kullan display:flexvewhite-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>

<span>Etiketi, bir belgedeki grup inline-elementler için kullanılır.
(kaynak)