是否可以使用css3列实现图像上的布局?
我们在这里得到的是文本列,但前两列按标题“下移”。它也需要响应,因此无论多高或多宽的色谱柱-“首先降低2”。
基本上可以将其限制于问题-如何将CSS应用于CSS3列容器的第二列中的第一项?
最佳答案
可以使用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>
关于html - 带切口的CSS3列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26405709/