CSS3列與剪影

Question

是否有可能使用css3列實現這樣的佈局圖像？

我們這裏得到的是文本列，但前2列由標題「下移」。它也需要具有響應能力，因此無論柱子的高度或寬度如何 - 其中第一個將被「降低」。

基本上它可能只限於問題 - 如何將CSS應用於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/