在 4 列中让一个段落围绕另一个段落流动
Have a paragraph flow around another paragraph, in 4 columns
我正在动态拆分 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 段。第一段占用 2 列，第二段占用剩余块（即 2、3、4、5），高度相同。
您目前可以使用 CSS Regions. The issue is that it has a really low support: around 17%。
它仍然是实验性的，但有 polyfills：
• https://github.com/FremyCompany/css-regions-polyfill 和
• https://github.com/adobe-webplatform/css-regions-polyfill.
这是第二个 polyfill 的 demonstration。
目前我不建议在生产环境中使用 CSS 个区域。
您需要重新排列将 类 应用于段落的方式。
.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>
您可以使用 multi-column layout 来做到这一点，但这只是因为总列数是第一段跨越的列数的倍数。
诀窍是创建一个包含 2 列的包装器，其中放置了两个段落。然后让两个段落再次有 2 列（或者只有第二个，如果你想让第一段有一个单独的列）。这之所以有效，只是因为数字有效：它一般不会起作用，例如对于 5 列并且第一段跨度为 2。看起来 CSS 对于一般情况还不够强大。 （虽然，根据 , we're getting there with CSS Regions。）
这里是您的用例的一个小演示（4 列，第一段跨越 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>
我正在动态拆分 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 段。第一段占用 2 列，第二段占用剩余块（即 2、3、4、5），高度相同。
您目前可以使用 CSS Regions. The issue is that it has a really low support: around 17%。
它仍然是实验性的，但有 polyfills：
• https://github.com/FremyCompany/css-regions-polyfill 和
• https://github.com/adobe-webplatform/css-regions-polyfill.
这是第二个 polyfill 的 demonstration。
目前我不建议在生产环境中使用 CSS 个区域。
您需要重新排列将 类 应用于段落的方式。
.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>
您可以使用 multi-column layout 来做到这一点，但这只是因为总列数是第一段跨越的列数的倍数。
诀窍是创建一个包含 2 列的包装器，其中放置了两个段落。然后让两个段落再次有 2 列（或者只有第二个，如果你想让第一段有一个单独的列）。这之所以有效，只是因为数字有效：它一般不会起作用，例如对于 5 列并且第一段跨度为 2。看起来 CSS 对于一般情况还不够强大。 （虽然，根据
这里是您的用例的一个小演示（4 列，第一段跨越 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>