I am splitting 4 column dynamically with adjustable height. But I want first paragraph in 2 columns and remaining paragraph separated by 4 columns. This is what I've tried:
.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; }
<pre><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>
column-span - CSS | MDN[^]:Values: noneThe element does not span multiple columns.allThe element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context.
2
column-span
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)