Wie verhindert man, dass Inline-Divs in die nächste Zeile innerhalb eines Elternteils springen?

Question

Ich habe zwei Inline-Divs, die die Breite der Eltern in der Breite überschreiten. Daher springt das zweite Div zur nächsten Zeile: http://jsfiddle.net/uVqG6/2/

Wie kann ich beide Divs auf der gleichen Linie halten?

Hinzufügen von overflow:hidden; zu div.a verbirgt einfach die zweite div.

Answer 1

Sie position: absolute; dafür verwenden können, sonst keine andere Möglichkeit, außer Ihren Container div Breite erhöhen oder nowrap

Demo

Mit z-indexDemo

CSS

.a { 
    width: 100px; 
    height: 50px; 
    border: solid 1px #345; 
    position: relative; 
} 

.b { 
    width: 60px;  
    height: 50px; 
    background-color: red; 
} 
.c { 
    width: 50px;  
    height: 50px; 
    background-color: green; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

Answer 2

.a { 
width: 100px; 
height: 50px; 
border: solid 1px #345; 
white-space: nowrap; 
overflow:hidden; } 

Macht das, was Sie wollen?

Answer 3

Inline-Elemente verhalten sich ähnlich wie Text. Wenn Sie verhindern möchten, dass sie umbrochen werden, entfernen Sie entweder den Leerraum, den Sie für die Formatierung verwendet haben, oder fügen Sie white-space:nowrap; zur Regel für .a hinzu. Hier

ist eine Demonstration: http://jsfiddle.net/bfkgT/

Answer 4

Theres ein paar Möglichkeiten, dies zu tun. Als Erstes können Sie display: inline-block; oder float: left; verwenden, um die divs dazu zu bringen, Seite an Seite zu sitzen. Sie arbeiten anders, also achten Sie darauf, den richtigen für Ihren Fall zu verwenden.

Zweitens wird keiner von denen funktionieren, wenn das enthaltende div (a) groß genug ist, um beide divs in derselben Zeile zu enthalten. Oder Sie können overflow: hidden; auf dem enthaltenden div (a) verwenden.

Edit:

Ich habe Ihr Beispiel aktualisiert: http://jsfiddle.net/uVqG6/11/

Ich hatte white-space: nowrap; zu verwenden, da die Innen divs Einwickeln wurden.

Hier ist eine andere Antwort, die Ihre Frage auch beantwortet: CSS: how to stop text from taking up more than 1 line?

Remeber dass display: inline-block grundsätzlich behandelt das Element als Text verwendet wird, so dass die meisten Text-Formatierung CSS-Eigenschaften, um es anwenden wird.