плавающий два div, в то время как один содержит динамический текст - как сохранить его справа от первого div?

Question

Вот HTML:

<div style="width:300px;height:220px;background:#00A;float:left">block 1</div>

<div style="background:#0A0;display:table-row">block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2</div>

<div style="background:#A00;display:table-row">block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3</div>

<div style="background:#600;display:table-row">block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4</div>

Я получил блок 2 показываться справа от блока 1, однако проблема в том, что когда блок 2 или блок 3 пройдет высоту блока 1, он не займетполная ширина страницы.

Вот хороший пример того, что я хочу: http://sovietrussia.org/o/

Как я могу добиться того же макета без использования таблиц?В основном, слева есть блок (изображение), а затем все остальные блоки появляются справа или снизу изображения в зависимости от того, подходит ли он туда, а текстовые блоки всегда занимают 100% ширины

Answer 1

Попробуйте это

div
{
display: table-cell;
}

скрипка