Плавающий дочерний div для заполнения только оставшегося пространства

Question

Я хочу, чтобы этот желтый ящик заполнил все доступное пространство как по вертикали, так и по горизонтали без наложения изображения.

(я пытаюсь сделать это без использования свойств таблицы)

Любые идеи?

Вот как это выглядит сейчас:

и это то, что я хочу:

.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

р- roblem is float: left делает желтую область не «растянутой». Чтобы изображение плавало справа от текста, оно должно появиться перед текстом. Таким образом, мы изменим порядок блоков контента:

<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> 

, а затем настроить CSS:

.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; 
} 

Обратите внимание, что всякий раз, когда вы плывете вещи, которые вы, скорее всего, нужно добавить, что называется «clearfix» , В этом случае применяется clearfix к .content-block-body, чтобы сделать его расширить вертикально, чтобы соответствовать плавающего элемента http://nicolasgallagher.com/micro-clearfix-hack/

Answer 2

Вы должны указать ширину левого блока и правого блока в CSS и сделать ширина изображения 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>

Answer 3

Вы можете использовать css3 flex. Это единственное, что работает отлично, когда дело доходит до получения высоты родительского узла для дочернего узла. Все взломы для старых браузеров работают не всегда.

.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>

также проверить этот прохладный сайт для фрагментов кода на centering in css.