在另一段周围有一个段落，以4列为单位

Question

我是分裂4列动态与可调的高度。但是我希望第一段在2列中，其余的段落被4列分开。这是我尝试过的：

​

.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段。第1段占据2列，第2段占据其余区块(即2、3、4、5)，高度相等。

Answer 1

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

.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;
}

<div class="text-justify col column-2">
  <p>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 class="column-2">According to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official
    sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two
    Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers
    from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota
    will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime
    minister at 6 pm today</p>
</div>

​

Answer 2

你可以用CSS区域。问题是，它的支持非常低：约17%目前。

它仍然是真正的实验，但也有多层填充：

·https://github.com/FremyCompany/css-regions-polyfill和

·https://github.com/adobe-webplatform/css-regions-polyfill。

下面是第二个正在运行的填充的游行示威。

此时，我不建议在生产中使用CSS区域。

Answer 3

您可以使用多列布局来完成这一任务，但这只是因为列总数是第一段所涵盖的列数的倍数。

诀窍是创建一个带有2列的包装器，其中包含两个段落。然后让这两个段落再次有2列(或者只有第二列，如果您希望第一段只有一列)。这只是因为数字的计算结果:它一般不能工作，例如5列和第1段跨度2。看起来CSS还不够强大到一般情况下。(尽管，按照文斯的回答的说法，我们是和CSS区域一起到达的。)

下面是您的用例的一些演示(4列，第1段跨越2)。

​

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

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

​