带有剪切的CSS3列

Question

是否可以使用css3列实现图像上的布局？

我们在这里得到的是文字列，但前两列是“向下移动”。按标题。它也需要具有响应性，因此无论有多高或多的列都是 - 2其中第一个将被降低＆＃39;。

基本上它可能仅限于问题 - 如何将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，每个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/