Question

我正在尝试在多个列中布置一个容器，但是有一个标题跨越所有列。

不幸的是，Firefox不支持column-span CSS3属性，因此我正在寻找不使用column-span的备用实现，我认为应该可行与flex。

这是我必须使用的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显示所需的输出：

＆＃13;

#wrapper {
  columns: 3;
}
h2 {
  border-bottom: 1px solid #666666;
  column-span: all;
}

＆＃13;

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

＆＃13;

以下是尝试使用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不会突破列边界。

Answer 1

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>

Revised Codepen

使用flex在三列上的全宽标题

1 个答案: