Wie kann verhindert werden, dass div umgebrochen wird?

Question

Ich habe schon viel gesehen und recherchiert, bevor ich versuchte zu fragen. Also ich benutze das 960 CSS-Framework, wo sie mir die Divs zur Verfügung stellen, um meine Website zu gestalten.

die html hier ....

<div id="header"> 
<div class="container_12"> 
    <div class="grid_5"> 
      EMPTY 
    </div> 
    <div class=" nav grid_7"> 
      EMPTY 
    </div> 
</div> 
</div> 

Die beiden div-Elemente sitzen nebeneinander schön auf voller Größe Bildschirm, aber wenn ich die Größe es das div-Element rechts von der Der Bildschirm wird darunter gelegt. Mir wurde gesagt, dass ich den Display-Inline-Block und den Whitespace-No-Wrapper verwenden soll, aber ich weiß nicht, wie ich das verstehen soll, und ich weiß auch nicht, was es bedeutet.

Wird jemand freundlich genug sein, es mir gründlich zu erklären? Vielen Dank!

Answer 1

Vielleicht Flexbox etwas mit ... Hinweis damit Sie auch die beiden divs nehmen die gleiche Menge an Spaltenraum haben kann, wenn man durch Setzen des Flex von grid_5 auf „1 1 auto“ wollen.

.container_12 { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; /* Note that this is actually the default value... just putting here for educational purposes */ 
 
} 
 
.grid_5 { 
 
    flex: 0 0 auto; 
 
    } 
 
.grid_7 { 
 
    flex: 1 1 auto; 
 
    }

<div id="header"> 
 
<div class="container_12"> 
 
    <div class="grid_5"> 
 
      EMPTY 
 
    </div> 
 
    <div class=" nav grid_7"> 
 
      EMPTY 
 
    </div> 
 
</div> 
 
</div>

Answer 2

Das System 960 Raster ist nicht ansprechbar und nimmt eine minimale Behälterbreite von 960 Pixeln. Also alles, was Sie wirklich tun müssen, ist fügen Sie diese zu Ihrer CSS:

.container_12 { min-width: 960px; } 

Wenn Sie ein reaktions Grid-System wollen, empfehle ich Ihnen machen Sie sich mit Bootstrap.