让一个段落围绕另一个段落，分为4列

Question

我动态分割4列，高度可调。但我想要2列中的第一段和剩下的段由4列分隔。 This是我尝试过的：

.column-4 {
  -webkit-columns: 4;
  -moz-columns: 4;
  columns: 4;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  column-gap: 15px;
}

.column-2 {
  column-span: 2;
  -webkit-column-span: 2;
  -moz-column-span: 2;
}

.text-justify {
  text-align: justify;
}

p:first-child {
  margin-top: 0;
}

<div class="text-justify column-4">
  <p class="column-2">Prime Minister Narendra Modi spoke to Andhra Pradesh Chief Minister N Chandrababu Naidu, a day after the TDP chief decided to pull out of the NDA government at the Centre</p>
  <p>According to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm today</p>
  <p>In a late night development yesterday, the TDP had announced its decision to pull out its ministers from the NDA government.</p>
  <p>The two TDP ministers in the Modi government are civil aviation minister Ashok Gajapathi Raju and minister of state for science and technology Y S Chowdary.</p>
  <p>In a late night development yesterday, the TDP had announced its decision to pull out its ministers from the NDA government.</p>
  <p>The two TDP ministers in the Modi government are civil aviation minister Ashok Gajapathi Raju and minister of state for science and technology Y S Chowdary</p>
  <p>In a late night development yesterday, the TDP had announced its decision to pull out its ministers from the NDA government</p>
  <p>The two TDP ministers in the Modi government are civil aviation minister Ashok Gajapathi Raju and minister of state for science and technology Y S Chowdary.</p>
  <p>In a late night development yesterday, the TDP had announced its decision to pull out its ministers from the NDA government</p>
  <p>The two TDP ministers in the Modi government are civil aviation minister Ashok Gajapathi Raju and minister of state for science and technology Y S Chowdary.</p>
  <p>In a late night development yesterday, the TDP had announced its decision to pull out its ministers from the NDA government.</p>
</div>

请找到下面的图片，这正是我想要的：

在图片中，第2，第3，第4和第5块一起形成一个连续的单段。那是我只使用2段。第1段占据2列，第2段占据剩余的块（即2,3,4,5），高度相等。

Answer 1

您可以使用CSS Regions。问题是它的支持率非常低：around 17%目前。

它仍然是实验性的，但有多种填充物：
•https://github.com/FremyCompany/css-regions-polyfill和
•https://github.com/adobe-webplatform/css-regions-polyfill。

这是第二次填充的demonstration。

我不建议此时在制作中使用CSS区域。

Answer 2

您需要重新排列将类应用于段落的方式。

＆＃13;

＆＃13;

apple
apple
orange
apple
orange
orange
orange
orange

＆＃13;

.col {
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  column-gap: 15px;
}

.column-2 {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}

.text-justify {
  text-align: justify;
}

p:first-child {
  margin-top: 0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用multi-column layout执行此操作，但这只是因为列总数是第一段跨越的列数的倍数。

诀窍是创建一个包含2列的包装器，其中放置了两个段落。然后让两个段落再次有2列（或者只有第二个，如果你想让第一段有一个列）。这只是因为数字的计算结果：它通常不起作用，例如5列并且第一段跨度为2.看起来CSS对于一般情况来说还不够强大。 （虽然，根据Vince's answer，我们将CSS Regions转到那里。）

以下是您的用例的一些示例（4列，第一段跨越2）。

[['A', 'E'],
 ['A', 'F'],
 ['A', 'G'],
 ['E', 'F'],
 ['E', 'G'],
 ['F', 'G'],
 ['B', 'D'],
 ['B', 'X'],
 ['D', 'X'],
 ['C', 'Y'],
 ['f', 'h']]

p {
  margin: 0 0 1.4rem;
  padding: 0;
  line-height: 1.4rem;
  text-align: justify;
}

.wrapper {
  column-count: 2;
  column-gap: 2rem; /* gap in the middle */
}

.first {
  font-style: italic;
}

.second {
  width: 100%;
  column-count: 2;
  column-gap: 2rem; /* gap in second paragraph */
}

这是第一段有两列的版本。

<div class="wrapper">
  <p class="first">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non enim ac risus facilisis tincidunt. Fusce libero sem, dignissim eu condimentum sodales, condimentum quis eros. Mauris nec scelerisque justo.
  </p>
  <p class="second">
    In malesuada efficitur urna, non mattis enim. Curabitur eleifend, mauris sed semper consectetur, sapien ipsum posuere justo, vitae tincidunt sem risus nec quam. Aenean quis sollicitudin turpis. Donec sit amet nisi ultricies, pharetra purus nec, varius
    erat. Cras et sagittis eros. Maecenas aliquam libero in arcu ullamcorper, ut feugiat nibh sagittis. Integer ut orci et magna sollicitudin porttitor. Vestibulum efficitur urna non dui tristique vulputate. Pellentesque finibus mattis libero at ultrices.
    Vivamus eget risus massa. Suspendisse potenti. Proin vel lectus elementum, finibus ipsum vitae, vulputate ligula. Aenean commodo laoreet eleifend. Donec finibus, magna vitae lobortis fringilla, ex nunc feugiat eros, at imperdiet orci ante et orci.
    Duis in mi dui.
  </p>
</div>

p {
  margin: 0 0 1.4rem;
  padding: 0;
  line-height: 1.4rem;
  text-align: justify;
}

.wrapper {
  column-count: 2;
  column-gap: 2rem; /* gap in the middle */
}

.first {
  column-count: 2;
  column-gap: 2rem; /* gap in first paragraph */
  font-style: italic;
}

.second {
  width: 100%;
  column-count: 2;
  column-gap: 2rem; /* gap in second paragraph */
}