Verwenden Sie verfügbare Breite mit CSS

Question

Ich habe einen Sonderfall. Ich möchte ein Div die verfügbare Breite verwenden.

Dies ist mein Code:

.parent { 
 
    width: 100%; 
 
} 
 
.child-left { 
 
    width: 66%; 
 
    float: left; 
 
} 
 
.child-right { 
 
    width: 33%; 
 
    min-width: 400px; 
 
    float: right; 
 
}

<div class="parent"> 
 
    <div class="child-left"> 
 
    Lorem Ipsum 
 
    </div> 
 
    <div class="child-right"> 
 
    Lorem Ipsum 
 
    </div> 
 
</div>

Das child-right Element mindestens 400px breit sein sollte. Wenn ich die Größe des Bildschirms ändere, bricht das Element zusammen. Gibt es eine Möglichkeit, dass das child-left Element den verfügbaren horizontalen Platz nutzt? Vielleicht CSS-Flexbox?

Answer 1

Ich denke, Sie können es mit flex ja tun.

.parent{ 
    display:flex; 
    justify-content: space-between; 
} 
.child-right{ 
    flex-basis: 400px; 
} 

Answer 2

können Sie diesen Trick verwenden für Cross-Browser-Kompatibilität, ohne Flexbox:

.child-left { 
    width: auto; 
    overflow: none; 
} 
.child-right { 
    width: 33%; 
    min-width: 400px; 
    float: right; 
} 

Bitte beachten Sie, dass Sie zuerst in HTML rechten Kind zu legen haben. Die float: right; in .child-right macht das Div-Float nur mit dem folgenden Element (den folgenden Elementen). Wenn Sie es nach .child-left platzieren, wird es nicht daneben schwimmen.

<div class="parent"> 
     <div class="child-right"> 
     Lorem Ipsum 
    </div> 
    <div class="child-left"> 
     Lorem Ipsum 
    </div> 
</div> 

In Aktion sehen: https://jsfiddle.net/4s3oecrp/

Auch Sie Ihren CSS-Stil für die .parent Klasse entfernen sollten. 100% Breite ist nutzlos für Elemente, die display: block; festgelegt haben (standardmäßig auf p, div, Abschnitt, Artikel, ...), sie strecken sich automatisch auf ihre volle Breite.

Answer 3

können Sie Benutzer flex. fügen Sie einfach flex an die Mutter div

.parent { 
    width: 100%; 
    display:flex; 
} 
.child-left { 
    width: 66%; 
    float: left; 
} 
.child-right { 
    width: 33%; 
    min-width: 400px; 
    float: right; 
} 

<div class="parent"> 
    <div class="child-left"> 
    Lorem Ipsum 
    </div> 
    <div class="child-right"> 
    Lorem Ipsum 
    </div> 
</div> 

für besseres Lernen für http://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 4

Da Sie den verfügbaren freien Raum für child-left verwenden möchten, und nicht zulassen, dass die child-right in eine neue Zeile zu wickeln, mit ein flexbox ist hier ideal:

1. den Schwimmer entfernen und display: flex zum parent hinzuzufügen.

2. Fügen Sie flex: 1 zu child-left hinzu, um den freien Speicherplatz automatisch anzupassen.

3. Set min-width von child-rightflex: 0 1 400px verwendet, die das Element bedeutet, dass nur mit einem flex-basis von 400px schrumpfen.

.parent { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 
.child-left { 
 
    flex: 1; 
 
} 
 
.child-right { 
 
    flex: 1 0 400px; 
 
}

<div class="parent"> 
 
    <div class="child-left"> 
 
    Lorem Ipsum 
 
    </div> 
 
    <div class="child-right"> 
 
    Lorem Ipsum 
 
    </div> 
 
</div>

Lassen Sie mich Ihr Feedback zu this.thanks wissen!