Wie erzwinge ich, dass ein Blockcontainer immer die gesamte verfügbare Breite hat?

Question

Hier ist der HTML-Code, an dem ich gerade arbeite. Die CSS ist nicht vollständig, da ich weiß nicht, wie zu tun, was ich will:

.container { 
 
    margin: auto; 
 
    width: 700px; 
 
    border: solid blue 2px; 
 
} 
 
.container div { 
 
    padding: 10px 0; 
 
    vertical-align: top; 
 
} 
 
#orange { 
 
    background-color: coral; 
 
} 
 
#blue { 
 
    background-color: lightblue; 
 
} 
 
.container > div .content { 
 
    border: dotted black 1px; 
 
    height: 100px; 
 
    width: 250px; 
 
    margin: auto; 
 
    display: block; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div id="orange"> 
 
    <div class="content">content 
 
     <br />width: 250px</div> 
 
    </div> 
 
    <div id="blue"> 
 
    <div class="content">content 
 
     <br />width: 250px</div> 
 
    </div> 
 
</div>

Wenn der Behälter groß genug ist, die orangefarbene und blaue Blöcke sollten nebeneinander stehen, dies wie:

Wenn ich die Breite des Behälters, der horizontale Rand innerhalb der orange und blaue Blöcke reduzieren wird schrumpfen, bis ihre Grenze Börde Inhalt treffen r:

Hier ist, was ich erhalten möchte, wenn ich ein bisschen mehr die Behälterbreite verringern:

Wer weiß, wie dies zu tun? Wenn möglich, ohne JS. Und der Container hängt nicht von der Bildschirmgröße ab, daher kann ich keine Medienabfragen basierend auf der Gerätebreite verwenden. Und natürlich muss die Lösung mit so vielen Webbrowsern wie möglich kompatibel sein (einschließlich der neuesten Versionen von IE).

Edit: hielt ich habe flexbox verwenden, aber ich hatte gehofft, dass ich ohne eine Lösung finden könnte. Übrigens wäre ich an einer Möglichkeit interessiert, im CSS-Code spezifische Regeln zu schreiben, die nur für IE9 und darunter gelten.

Edit2: Es scheint es nicht möglich zu tun, was ich mit den folgenden Einschränkungen will:

• keine JS
• keine Bedingung auf der Bildschirmgröße, aber auf der Behältergröße statt

Also ich denke, ich werde zumindest eine davon ...

Answer 1

Jus fallen haben t Fügen Sie inline-block zu den zwei Feldern hinzu, die nebeneinander sein müssen, und das Blockelement verhält sich wie Sie möchten (nehmen Sie immer die gesamte verfügbare Breite), da dies das Standardverhalten von Blockelementen ist.

.container { 
 
    margin: auto; 
 
    font-size: 0; 
 
    width: 700px; 
 
} 
 
.container div { 
 
    padding: 10px 0; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    font-size: 1rem; 
 
} 
 
#orange { background-color: coral; } 
 
#blue { background-color: lightblue; } 
 

 
.container > div .content { 
 
    border: dotted black 1px; 
 
    height: 100px;  
 
    width: 250px; 
 
    margin: auto; 
 
    display: block; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div id="orange"> 
 
    <div class="content">content<br />width: 250px</div> 
 
    </div> 
 
    <div id="blue"> 
 
    <div class="content">content<br />width: 250px</div> 
 
    </div> 
 
</div>

Während Inline-Block läuft über den Textfluss mit dem Verhalten blockiert, müssen Sie die Leerzeichen zwischen den Boxen zu vermeiden. Deshalb setze ich font-size:0 in den Container und setze font-size: 1rem erneut in die inneren Kästchen zurück, um das zu erreichen.

Answer 2

Lösung mit Flexbox.

Falls Sie wünschen, Arten spezifisch für IE9 haben und unten gibt es 2 Möglichkeiten:

1. haben separate Stylesheet (CSS-Datei), spezifisch für IE 9 und unten, verweisen sie in HTML - Target IE9 Only via CSS

2. bearbeiten CSS auf diese Weise - https://css-tricks.com/snippets/css/browser-specific-hacks

.container { 
 
    display: flex; 
 
    background-color: green; 
 
    justify-content: space-around; 
 
    padding: 10px; 
 
} 
 
#orange { 
 
    background-color: coral; 
 
    height: 100px; 
 
    min-width: 250px; 
 
    text-align: center; 
 
    margin: 5px; 
 
} 
 
#blue { 
 
    background-color: lightblue; 
 
    height: 100px; 
 
    min-width: 250px; 
 
    text-align: center; 
 
    margin: 5px; 
 
} 
 
@media (max-width: 500px) { 
 
    .container { 
 
    flex-flow: row wrap; 
 
    } 
 
}

<div class="container"> 
 
    <div id="orange"> 
 
    <div class="content"> 
 
     content 
 
     <br/>width: 250px 
 
    </div> 
 
    </div> 
 
    <div id="blue"> 
 
    <div class="content"> 
 
     content 
 
     <br/>width: 250px 
 
    </div> 
 
    </div> 
 
</div>