我试图在多个列中布置一个容器，但一个标题横跨所有列。
不幸的是，Firefox(还)不支持 column-span CSS3 属性，所以我正在寻找不使用 column-span 的替代实现，我认为 flex 应该可以实现。
这是我必须使用的 HTML。 我无法通过将部分 HTML 包装在子容器中来修改 HTML。因此，我正在寻找 CSS 解决方案(或者可能是 js)。
<div id="wrapper">
<h2>Headline</h2>
<h3>Item title</h3>
<p>Nulla eum futurum demonstraverunt possim mazim. Wisi esse in congue littera iusto. Eu diam ea augue vero ii. </p>
<h3>Item 2 title</h3>
<p>Aliquam parum nam doming eodem amet. Legere blandit duis nisl in diam. Dignissim dolore dolore vulputate accumsan laoreet.
</p>
<h3>Item 3 title</h3>
<p>Parum erat est quam etiam suscipit. Habent ullamcorper iriure nulla eros lius. Elit etiam gothica demonstraverunt mirum duis. Dolor blandit parum notare soluta aliquam. Consequat iusto suscipit lobortis usus lorem. Quarta tempor typi te modo videntur.
</p>
<h3>Item 4 title</h3>
<p>Eu laoreet decima est est at. Parum anteposuerit notare molestie typi nonummy. Claritatem quod quam dolor saepius qui. Et in processus et tincidunt typi. Cum augue facilisi liber ad doming. Hendrerit eorum per eleifend vero mirum. Decima laoreet nulla dolore tincidunt iusto. Eleifend parum aliquam ut dolore facilisis. Volutpat modo in in zzril nunc.
</p>
<h3>Item 5 title</h3>
<p>Clari mirum odio qui quam euismod. At fiant tempor zzril in autem. Facit nonummy dignissim eros notare nulla. Exerci qui in zzril ex qui. Dignissim et saepius at anteposuerit hendrerit. Congue videntur congue augue est dynamicus. Imperdiet legunt lorem dolore dolore in. Mazim typi mazim habent volutpat magna. Accumsan habent lobortis hendrerit me lobortis.
</p>
<h3>Item 6 title</h3>
<p>Sed in claritas dolor eu volutpat. Nostrud insitam magna dolore typi exerci. Esse veniam velit esse esse anteposuerit.
</p>
<h3>Item 7 title</h3>
<p>Odio iis commodo insitam et nobis. Euismod commodo legere eodem commodo clari. Consectetuer Investigationes eodem quod wisi facit. Nibh id claram iriure praesent qui. Ut non modo zzril claram claram. Et est est wisi typi quinta.
</p>
</div>
以下代码片段通过使用 columns 和 column-span 显示了所需的输出:
#wrapper {
columns: 3;
}
h2 {
border-bottom: 1px solid #666666;
column-span: all;
}<body>
<div id="wrapper">
<h2>Headline</h2>
<h3>Item title</h3>
<p>Nulla eum futurum demonstraverunt possim mazim. Wisi esse in congue littera iusto. Eu diam ea augue vero ii.</p>
<h3>Item 2 title</h3>
<p>Aliquam parum nam doming eodem amet. Legere blandit duis nisl in diam. Dignissim dolore dolore vulputate accumsan laoreet.
</p>
<h3>Item 3 title</h3>
<p>Parum erat est quam etiam suscipit. Habent ullamcorper iriure nulla eros lius. Elit etiam gothica demonstraverunt mirum duis. Dolor blandit parum notare soluta aliquam. Consequat iusto suscipit lobortis usus lorem. Quarta tempor typi te modo videntur.
</p>
</div>
</body>这是我尝试使用 flex 的代码笔:http://codepen.io/fulv/pen/bZOWVY
同样，这是 CSS:
html {
height: 100%;
}
body {
height: 100%
}
#wrapper {
display: flex;
flex-flow: column wrap;
max-height: 100%;
width: 100%;
}
#wrapper > * {
flex: 1 1 30%;
width: 30%;
}
h3 {
page-break-after: avoid;
break-after: avoid;
}
h2 {
flex: 0 0 100%;
border-bottom: 1px solid #666666;
}
问题是 h2 标题:我不知道如何让它横跨三栏。
第二个问题是如何使 h3 和后面的 p 不跨越列边界。
最佳答案
flex order property可以很方便。 HTML 没有变化。
#wrapper {
display: flex;
flex-wrap: wrap;
}
h2 {
flex: 0 0 100%;
border-bottom: 1px solid #666666;
}
h3 {
order: 1;
flex: 0 0 33%;
}
p {
order: 2;
flex: 0 0 33%;
}<div id="wrapper">
<h2>Headline</h2>
<h3>Item title</h3>
<p>Nulla eum futurum demonstraverunt possim mazim. Wisi esse in congue littera iusto. Eu diam ea augue vero ii.</p>
<h3>Item 2 title</h3>
<p>Aliquam parum nam doming eodem amet. Legere blandit duis nisl in diam. Dignissim dolore dolore vulputate accumsan laoreet.
</p>
<h3>Item 3 title</h3>
<p>Parum erat est quam etiam suscipit. Habent ullamcorper iriure nulla eros lius. Elit etiam gothica demonstraverunt mirum duis. Dolor blandit parum notare soluta aliquam. Consequat iusto suscipit lobortis usus lorem. Quarta tempor typi te modo videntur.
</p>
</div>关于html - 使用 flex 的全宽标题超过三列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38886138/