带切口的 CSS3 列

Question

是否可以使用css3列实现像on image这样的布局？

我们在这里得到的是文本列，但前 2 列按标题“下移”。它还需要具有响应性，因此无论列有多高或多宽 - 其中的 2 个将被“降低”。

基本上它可能仅限于问题 - 如何将 css 应用于 css3 列容器的第二列中的第一项？

Answer 1

可以使用column-span 来让一个元素跨多个列。

阅读规范 http://dev.w3.org/csswg/css-multicol/

我没有看到您的布局请求的选项。也许你应该使用 hack。

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 不支持 column-span 属性。

<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 元素放置在内容中的正确位置？无法想象如何找到一种方法将其放置在正确位置旁边的长度或字体大小的变化标题）

我将此答案保留为社区 wiki，也许有人可以改进它

代码如下：

<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/