Как сделать раскладку столбцов CSS с «плавающим» объектом, охватывающим несколько столбцов?

Question

Я хотел бы создать макет в CSS, который выглядит примерно так:

+----------------+ __5_____ 
|    | __6_____ 
|    | __7_____ 
|    | __8_____ 
+----------------+ __9_____ 
___1____ __3_____ __10____ 
___2____ __4_____ 

В принципе, текст (в приведенной выше схеме, линии с меткой 1 по 10), которые расположены в макете в три колонки , с блоком (изображение или что-то еще), сидящим в левом верхнем углу, занимая два столбца, вытесняя текст.

Важно, что я бы ДЕЙСТВИТЕЛЬНО хотел, чтобы вручную не указывать, где разрывается колонка, поскольку контент предоставляется пользователю. Я использую семейство свойств столбцов CSS (ширина столбца, количество столбцов и т. Д.), Чтобы получить макет столбца для текста, но у меня нет большого успеха, если я хочу большой плавающий блок. Есть ли способ сделать это, что не связано с кучей JS для вычисления оптимальных местоположений разбиения столбцов и создания самих столбцов?

Отредактировано для добавления: если это не ясно, в этом примере есть 10 строк, но на практике мне нужно иметь дело с произвольным количеством строк и по-прежнему получать столбцы примерно равной высоты.

Answer 1

Вы можете попробовать установить свой образ ширину Div до 66% емкости, а также добавить отступы с обеих сторон, чтобы выровнять его с белым пространством между колоннами:

.div-with-image { 
    width: 66%; // 2/3 of the container 
    padding: 0 20px; // assuming 20px gutters for the columns 
} 

ОБНОВЛЕНИЕ

В качестве current state of the CSS Multi-column Module единственными «естественными» альтернативами для проецирования изображения через несколько столбцов являются либо через column-span свойство или переполнение изображения внутри столбца.

Однако column-spandoesn't support -yet- других значений, чем none (по умолчанию) и all и перелив не сместят текст в следующих колонках, но would just cover it или will be clipped по вмещающему колонку (в зависимости от браузера).

Чистейший решение, которое приходит на ум:

Абсолютное положение ваше изображение в верхнем левом углу и определить его ширину, чтобы охватить 2 колонки, установите верхний край первого пункта на высоту вашего изображения и вставить разрыв перед фиктивным элементом (просто заполнителем, может быть span), идентифицированным с классом. Наконец, поскольку этот фиктивный элемент будет в первой строке второго столбца, вы можете назначить тот же самый верхний край, что и первый абзац первого столбца.

#image-placeholder { 
    width: 600px; 
    height: 200px; 
    background-color: lightgreen; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#columnized { 
    -moz-column-width: 300px; 
    column-width: 300px; 
    position: relative; 
} 

#columnized p:nth-child(2) { // the image is the first child 
    margin-top: 200px; 
} 

.break { // your dummy element (I used a span) 
    break-before: always; 
    display: inline-block; 
    margin-top: 214px; // I had to tweak the margin a little 
} 

Дополнительные примечания

Я знаю, что вы сделали свой фрагмент кода, как просто и возможно, но, на всякий случай: не забудьте добавить p теги и сделать он реагирует (лучшие практики).Вы можете установить высоту деления #columnized, чтобы использовать один и тот же разрыв для разных размеров экрана.

Answer 2

Вы могли бы просто сделать простой двухэтажный макет и разбить пополам, где это необходимо. JSFiddle

/* 2 column grid */ 
 
.gridWrapper { 
 
    width: 80%; 
 
    float: none; 
 
    margin: 0 auto; 
 

 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
} 
 

 
.column { 
 
    float: left; 
 
    width: 50%; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.column img { 
 
    width: 100%; 
 
    max-width: 400px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    display: block; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.column p { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 10px; 
 
    margin: 0 0 5px; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    border: 1px solid gray; 
 
} 
 

 
.left, .right { 
 
    border: 1px solid blue; 
 
} 
 

 
.split { 
 
    float: left; 
 
    width: 50%; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    border: 1px solid red; 
 
}

<div class="gridWrapper"> 
 
    <div class="column left"> 
 
    <div class="image"> 
 
     <img src="http://c.shld.net/rpx/i/s/i/spin/image/spin_prod_709722401??hei=64&wid=64&qlt=50"> 
 
    </div> 
 
    <div class="split"> 
 
     <p>1</p> 
 
     <p>2</p> 
 
    </div> 
 
    <div class="split"> 
 
     <p>3</p> 
 
     <p>4</p> 
 
    </div> 
 
    </div> 
 
    <div class="column right"> 
 
    <p>5</p> 
 
    <p>6</p> 
 
    <p>7</p> 
 
    <p>8</p> 
 
    <p>9</p> 
 
    </div> 
 
</div><!-- END gridWrapper -->