So zeigen Sie Inline-Blöcke an, ohne sie beim Verkleinern des übergeordneten Elements in einer neuen Zeile zu unterbrechen

Lesezeit: 2 Minuten

Ich habe 2 Spalten (Inline-Blöcke) in einem Container (100% Breite).

Die Spalte auf der linken Seite muss eine Mindestbreite haben, z. B. 200 Pixel, Breite: 25 %.

Die rechte Spalte hat eine Breite von 75 %

<style>
.outer {
    width: 100%;
    border: 1px solid black;
}
.left, .right {
    display:inline-block;
}
.left {
    min-width: 200px;
    width: 25%;
    background-color: #dcc2c2;
}
.right {
    width: 75%;
    background-color: #d0dee8;
}
</style>

    <div class="outer">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

Bis die Mindestbreite beim Ändern der Größe erreicht ist, sitzen die Spalten nebeneinander, was ich will, aber sobald die Mindestbreite einsetzt, fällt die rechte Spalte in die nächste Zeile.

Wie kann ich die rechte Spalte schrumpfen lassen, aber nicht in die nächste Zeile fallen?

Link zu JSFiddle

Sie können verwenden calc() die zu begrenzen max-width der rechten Spalte jsfiddle.net/viphalongpro/4Bqvg/4 Jedoch calc() wird von IE8 (und darunter) nicht unterstützt

– König König

10. Juni 2014 um 13:49 Uhr

j08691

Hinzufügen white-space:nowrap und overflow:hidden nach außen:

.outer {
    width: 100%;
    border: 1px solid black;
    white-space:nowrap;
    overflow:hidden;
}

jsFiddle-Beispiel

Ihr Fix funktioniert nicht in allen Situationen gut, wie Sie hier sehen können: jsFiddle

– Ofir

9. März 2017 um 6:41 Uhr
Ich bin gerade auf diese magische Lösung gestoßen und habe herumgesucht, das ist die nächste, die ich gefunden habe. MDN doc spricht nur darüber white-space‘s Auswirkungen auf Text und nicht auf Elemente, was dies noch mysteriöser macht. Haben Sie etwas, das erklärt, warum das funktioniert?

– JJPandari

20. Oktober 2017 um 9:55 Uhr
Wenn Sie einen Minifier oder einen Compiler wie Webpack verwenden, müssen Sie sich keine Gedanken darüber machen, dass durch Zeilenvorschübe Leerzeichen entstehen.

– Ihodonald

14. August 2019 um 21:00 Uhr

Sie können verwenden calc(100% - 200px) Halten Sie Platz, damit es funktioniert!

.right {
    width:75%;
    max-width:calc(100% - 200px);
    background-color: #d0dee8;
}

Geige

Infos zu css3 calc()

Denken Sie daran, dass es in IE8 oder älter nicht funktioniert (siehe Info über css3 calc() Link in meiner Antwort). Wenn dies für Sie funktioniert, akzeptieren Sie bitte meine Antwort. Akzeptieren Sie andernfalls @j08691

– Anima-t3d

10. Juni 2014 um 14:08 Uhr
Ja, wusste, dass es in IE8 oder älter nicht funktioniert, nochmals vielen Dank für die Erinnerung. Aber wie Sie sagten, scheint die Lösung von @ j08691 auch zu funktionieren.

– code.tweetie

10. Juni 2014 um 14:24 Uhr
Calc ist nett, aber seien Sie sich bewusst, dass es bei häufiger Verwendung leistungsintensiv sein kann. Dies gilt für die meisten mathematisch orientierten Funktionen.

– Tschad

24. April 2018 um 23:00 Uhr
beste lösung ich habe flex ausprobiert und ich habe auch genaue prozentsätze gemacht, aber das ist die beste antwort, die ich die ganze woche gesehen habe

– Trent Stewart

21. August 2020 um 0:54 Uhr

11459500cookie-checkSo zeigen Sie Inline-Blöcke an, ohne sie beim Verkleinern des übergeordneten Elements in einer neuen Zeile zu unterbrechen

#Breite #CSS #html