Столы CSS3 с вырезом

Question

Возможно ли достичь такого макета, как на изображении, используя столбцы css3?

Что мы получили здесь колонки текста, но первые 2 колонки «съехал» по названию. Он также должен быть отзывчивым, поэтому независимо от того, насколько высоки или широки столбцы, - 2 из них будут «опущены».

В принципе, это может быть ограничен вопросом - как применить css к первому элементу во 2-м столбце контейнера столбцов css3?

Answer 1

Можно использовать column-span, чтобы иметь пролет элементов на нескольких столбцах.

Чтение спецификации http://dev.w3.org/csswg/css-multicol/

Я не вижу вариант для вашего запроса макета. Вероятно, вы должны использовать хак.

http://jsfiddle.net/8m0phrpf/

CSS

.newspaper { 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
    -moz-column-count: 3; /* Firefox */ 
    column-count: 3; 
} 

h2 { 
    -webkit-column-span: all; /* Chrome, Safari, Opera */ 
    column-span: all; 
} 

HTML

Примечание: Internet Explorer 9 (и более ранних версий) и Firefox не поддерживают свойство столбца диапазона.

<div class="newspaper"> 
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
</div> 

Answer 2

Я сделал попытку, это не так умен, и это можно было бы улучшить, но ... Я думаю, что довольно близко к макету в изображении.

В основном попытайтесь вложить 2 разных div с 2 колонками. затем используйте элемент для разбивки содержимого (hr в моем примере).

Это решение приводит к другим проблемам (как разместить элемент hr в правильном положении в содержимом?). Не представляете, как найти способ разместить в нужном месте рядом с изменением длины или размера шрифта название)

Я оставляю этот ответ как вики сообщества, может быть, кто-то может улучшить его

так вот код:

<div class="parent"> 
    <div class="child"> 
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1> 
    <span>Lorem ipsum dolor sit amet...<hr/> Iure fugit quaerat nisi optio...</span> 
    </div> 
</div> 

и это CSS:

h1, hr{ 
    -webkit-column-span: all; 
    column-span: all; 
    font-size:2em; 
} 

hr{visibility:hidden;} 

div.child, div.parent{ 
    -webkit-columns: 2 ; 
    -moz-columns: 2; 
    columns: 2; 
} 

вы можете увидеть, что работает в этой скрипке: http://jsfiddle.net/yL4zyx1p/