webentwicklung-frage-antwort-db.com.de

Wie mache ich einen DIV nicht wickeln?

Ich muss einen Container-DIV-Stil erstellen, der mehrere andere DIVs enthält. Es wird darum gebeten, dass diese DIVs nicht umbrochen werden, wenn die Größe des Browserfensters so geändert wird, dass sie schmal ist.

Ich habe versucht, es so wie unten zu machen.

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

Dies funktioniert in den meisten Fällen. In einigen besonderen Fällen ist das Rendern jedoch falsch. Ich fand die Container-DIV-Änderung auf 3000px Breite in RTL von IE7; und es wird chaotisch.

Gibt es eine andere Möglichkeit, einen Container DIV nicht zu verpacken?

htmlcssword-wrapnowrap
158
Morgan Cheng

Versuchen Sie es mit white-space: nowrap; im Container-Stil (anstelle von overflow: hidden;)

217
notkwite

Wenn ich keine minimale Breite definieren möchte, weil ich die Anzahl der Elemente nicht kenne, war das Einzige, was mir geholfen hat:

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

Aber nur in Chrome und Safari: /

44
fguillen

Folgendes funktionierte für mich ohne zu schweben (Ich habe dein Beispiel ein wenig modifiziert, um einen visuellen Effekt zu erzielen):

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

Die divs können durch Leerzeichen getrennt werden. Wenn Sie dies nicht möchten, verwenden Sie margin-right: -4px; anstatt margin: 5px; zum .slide (es ist hässlich, aber es ist ein kniffliges Problem ).

28
JSideris

Die Combo, die Sie brauchen, ist

white-space: nowrap

auf die Eltern und

display: inline-block; // or inline

auf die Kinder

26
Funkodebat

Das hat bei mir funktioniert:

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

23
Turako

overflow: hidden sollte Ihnen das richtige Verhalten geben. Ich vermute, dass RTL durcheinander ist, weil Sie float: left auf den gekapselten divs.

Abgesehen von diesem Fehler haben Sie das richtige Verhalten.

10
Yuval Adam

Versuchen zu benutzen width: 3000px; für den Fall von IE.

3
Andres GR

Keines der oben genannten hat bei mir funktioniert.

In meinem Fall musste ich dem von mir erstellten Benutzersteuerelement Folgendes hinzufügen:

display:inline-block;
2
J-DawG

sie können verwenden

display: table;

für Ihren Container und vermeiden Sie daher den overflow: hidden;. Es sollte die Arbeit erledigen, wenn Sie es nur zu Verpackungszwecken verwendet haben.

1
Paka

Das min-width -Eigenschaft funktioniert in Internet Explorer nicht ordnungsgemäß, was höchstwahrscheinlich die Ursache Ihrer Probleme ist.

Lesen Sie info und ein brillantes Skript, das viele IE CSS-Probleme behebt.

1
Aistina