Problem
Ohne Angabe einer Breite wird die Breite des Inline-Blocks automatisch durch seinen Inhalt bestimmt. In Ihrem Fall enthält der rote Block eine lange Linie, die (fast) den gesamten verfügbaren Platz ausfüllt. Der blaue Block ist breiter als der Raum, der vom roten Block zur Verfügung steht, sodass er in die nächste Zeile übergeht.
Lösung 1: Festlegen einer Breite für beide Elemente
Im folgenden Ausschnitt erhalten beide Blöcke eine Breite. Sie können eine Pixelbreite angeben, weil Sie auch die Containergröße kennen, aber Prozentsätze funktionieren auch, vorausgesetzt, sie addieren sich zu 100%, nicht mehr.
Beachten Sie, dass ich den HTML-Code auch etwas ändern musste, um die Leerräume zwischen ihnen zu entfernen. Dies ist ein häufiger Fehler bei der Wahl dieser Lösung.
Lösung 2: Zeigen Sie die Elemente als Tabellenzellen in einer Zeile an
Alternativ können Sie sie wie eine Tabellenzeile verhalten. Dies hat den Vorteil, dass ihre Höhe auch übereinstimmt, und dass Sie leicht eine von ihnen eine Breite und die andere nicht geben können. Außerdem haben Sie nicht das Problem mit Leerzeichen zwischen Elementen, das Sie lösen müssen, wenn Sie die erste Lösung verwenden.
Der display:inline-block bewirkt, dass beide Elemente in derselben Zeile bleiben , wenn dafür genügend Platz vorhanden ist . Andernfalls wird die Linie unterbrochen.
Es gibt viele Lösungen, die hier funktionieren würden, aber lassen Sie uns einfach denken ...
Wenn Sie sowohl für den Container als auch für das Divisionsfeld "b" eine feste Breite definiert haben, legen Sie auch eine feste Breite für das Divisor "a" fest, wobei 180px noch vorhanden ist.
Ihre inline-block -Elemente füllen den gesamten horizontalen Raum aus, wenn sie genügend Inhalt haben und andere Elemente darunter schieben. Eine Möglichkeit, dies zu beheben, wäre die Verwendung von flexbox.