Floating Child div um nur verbleibenden Platz zu füllen

Question

Ich möchte, dass die gelbe Box den gesamten verfügbaren Platz sowohl vertikal als auch horizontal füllt, ohne das Bild zu überlagern.

(Ich versuche, es zu tun, ohne Tabelleneigenschaften zu verwenden)

Irgendwelche Ideen?

Dies ist, wie es jetzt aussieht:

und das ist, was ich will:

.content-block-body{ 
 
    width: 100%; 
 
    background-color: brown; 
 
    overflow:auto; 
 
} 
 
.content-block-text{ 
 
    float:left; 
 
    background-color: red; 
 
    padding:2%; 
 
} 
 
.content-block-image{ 
 
    background-color: greenyellow; 
 
    float: right; 
 
}

<div class="content-block-body"> 
 
    <div class="content-block-text"> 
 
    <div>月額固定と成果報酬が選べます</div> 
 
    <div>成果報酬額に上限おもうけられます</div> 
 
    <div>料金が明瞭で予算に合わせた対策が可能</div> 
 
    </div> 
 
    <div class="content-block-image"> <img src="image-1.jpg"> </div> 
 
</div>

Answer 1

Der p Problem ist die float: left macht den gelben Bereich nicht "strecken". Damit das Bild rechts vom Text schwebt, muss es vor dem Text stehen. So ändern wir die Reihenfolge der Inhaltsblöcke:

<div class="content-block-body"> 
    <div class="content-block-image"> <img src="image-1.jpg"> </div> 
    <div class="content-block-text"> 
    <div>月額固定と成果報酬が選べます</div> 
    <div>成果報酬額に上限おもうけられます</div> 
    <div>料金が明瞭で予算に合わせた対策が可能</div> 
    </div> 
</div> 

Und dann die CSS anpassen:

.content-block-body { 
    width: 100%; 
    background-color: brown; 
    overflow:auto; 
} 
.content-block-text{ 
    /*float:left;*/ /* this we remove */ 
    background-color: red; 
    padding:2%; 
    /* this we add: */ 
    overflow: auto; 
} 
.content-block-image{ 
    background-color: greenyellow; 
    float: right; 
} 

Beachten Sie, dass, wenn Sie die Dinge schweben Sie wahrscheinlich hinzufügen müssen, was ein „clearfix“ genannt . In diesem Fall gelten die clearfix zum .content-block-body, um es vertikal zu machen erstrecken sich die Floats http://nicolasgallagher.com/micro-clearfix-hack/

Answer 2

Sie passen müssen Breite des linken Blocks und rechten Block in CSS angeben und Bildbreite 100%

.content-block-body{ 
 
    width: 100%; 
 
    background-color: brown; 
 
    overflow:auto; 
 
} 
 
.content-block-text{ 
 
    float:left; 
 
    background-color: yellow; 
 
    padding:2%; 
 
    width:56%; 
 
} 
 
.content-block-image{ 
 
    background-color: greenyellow; 
 
    float: right; 
 
    min-width:200px; 
 
    width:40%; 
 
} 
 
.content-block-image img{ 
 
    width:100%; 
 
}

<div class="content-block-body"> 
 
    <div class="content-block-text"> 
 
    <div>月額固定と成果報酬が選べます</div> 
 
    <div>成果報酬額に上限おもうけられます</div> 
 
    <div>料金が明瞭で予算に合わせた対策が可能</div> 
 
    </div> 
 
    <div class="content-block-image"> <img src="image-1.jpg"> </div> 
 
</div>

machen

Answer 3

Sie können css3 flex verwenden. Das ist die einzige Sache, die gut funktioniert, wenn es darum geht, die Höhe des Elternknotens für den Kindknoten zu erhalten. Alle Hacks für alte Browser funktionieren nicht immer.

.content-block-body{ 
 
    width: 100%; 
 
    background-color: brown; 
 
    overflow:auto; 
 
    display: flex; 
 
    clear: both; 
 
} 
 
.content-block-text{ 
 
    float:left; 
 
    background-color: red; 
 
    align-items: stretch; 
 
} 
 
.content-block-image{ 
 
    flex: 1; 
 
    background-color: greenyellow; 
 
} 
 

 
.content-block-image img{ 
 
    float: right; 
 
}

<div class="content-block-body"> 
 
    <div class="content-block-text"> 
 
    <div>月額固定と成果報酬が選べます</div> 
 
    <div>成果報酬額に上限おもうけられます</div> 
 
    <div>料金が明瞭で予算に合わせた対策が可能</div> 
 
    </div> 
 
    <div class="content-block-image"> 
 
    <img src="//placehold.it/250x250"> 
 
    </div> 
 
</div>

auch diesen kühlen Ort für Schnipsel Code Besuche auf centering in css.