问题
Can't find any documentation to see if anyone's already done this. I imagine it's possible through javascript or PHP. I'll explain what I'm trying to accomplish as so:
Assume I'm using Twitter Bootstrap 4.
Say I have the following content in HTML:
<div class="row">
<div class="col-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus nibh nisi, eget lobortis nisl efficitur eget. Fusce nec tincidunt felis, id tempor arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis feugiat diam. Morbi diam nisl, iaculis in elit eget, venenatis consectetur augue.
<p>Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu lacinia purus, quis facilisis massa erat a sapien. Phasellus mollis accumsan erat vel pharetra. Nulla semper cursus neque, nec pretium quam porta id. Duis pretium non diam sit amet rhoncus. Quisque dictum urna sed magna pretium, eget tincidunt ligula condimentum. Sed id risus vitae lectus condimentum eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus, diam dui lobortis ex, a scelerisque leo ligula porttitor velit. Duis ultricies risus urna, quis interdum tellus lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt id, pellentesque id nunc. Ut ultrices quam at lorem feugiat, eget laoreet sem auctor. In augue dolor, porta eget nulla sed, mattis euismod urna. Nullam vel sapien tellus. Vivamus et arcu at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a diam aliquam, vitae ultricies dui vulputate. Nulla id urna enim. Quisque varius neque vitae egestas hendrerit.
<p>Duis vitae imperdiet quam. Vestibulum congue finibus velit nec sagittis. Integer vel ex nulla. Nunc in urna dignissim, ullamcorper enim in, lobortis ligula. Vivamus tellus ligula, feugiat at diam ac, luctus vestibulum tortor. Cras congue magna vitae orci posuere volutpat. Duis eu eros rhoncus ligula auctor elementum. Fusce vulputate ante ut luctus fermentum. Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu, sit amet scelerisque tortor leo vel ligula. Praesent sem leo, volutpat sed erat vitae, consectetur maximus nibh. Ut at facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget, semper commodo libero. Aliquam metus tellus, facilisis ut posuere vel, lacinia id ex.
<p>Cras quis eros eleifend lorem tempus sodales. Sed semper sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel elit id sodales. Phasellus non lorem dolor. Ut viverra diam sed lacus tincidunt, vel lobortis sapien sodales. Praesent ante mi, iaculis sed erat vel, ultricies eleifend eros. Donec a libero vestibulum, dictum orci quis, scelerisque orci. Maecenas volutpat ex eu ex fermentum interdum.
<p>Cras ut elit risus. Sed semper mi mauris, vel bibendum augue pharetra efficitur. Vestibulum finibus elit sit amet velit blandit convallis et dignissim nisi. Etiam nec quam odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur ornare. Proin molestie purus sit amet lacinia hendrerit. Sed in elit mauris. Donec pretium sapien libero. Aliquam sed tempus lorem. Cras maximus eu urna vitae ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus lorem, condimentum at eros vitae, sagittis vestibulum elit. Sed placerat sapien urna, eget suscipit massa pharetra in. Nulla efficitur ac ipsum non varius.
<p>Donec quis consequat leo, in aliquet neque. Integer gravida faucibus diam id eleifend. Aenean at dolor nec ante aliquet consectetur. Nullam ullamcorper neque facilisis, faucibus nisl nec, volutpat elit. Fusce facilisis quis nisl sed lobortis. Suspendisse purus tellus, vulputate a tortor eu, pellentesque bibendum odio. Fusce nisl nisl, maximus non hendrerit non, accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et, pellentesque lobortis orci.</p>
</div>
</div>
However, I want to automatically split the content above in half when the screen is >768px and display as so.
<div class="row">
<div class="col-md-6">
<!-- Half the content -->
</div>
<div class="col-md-6">
<!-- Second half of content -->
</div>
</div>
As far as the content:
- Assume length is subject to change
- Assume number of paragraphs is subject to change
There are a few rules that must be maintained as well.
- Content cant only split at the end of paragraphs
- Split must be done based on paragraph heights, NOT based on paragraph lengths
- Columns must be as close to equal height as possible
Can it be done, and what's the best approach to achieve it?
Regarding my personal preference, it would be most ideal if I could achieve this with PHP, 2nd choice is jQuery.
回答1:
I think using column-width on CSS multi-columns is the way to go if you want it to be responsive and split the paragraphs into columns.
.row {
column-width: 400px;
column-gap: 10px;
}
p {
padding: 10px;
width: 100%;
}
Demo: https://www.codeply.com/go/UvsUTQDVcC
EDIT - the only way to avoid breaking paragraphs is using break-inside: avoid;, but then it diminishes the even height.
p {
padding: 10px;
width: 100%;
break-inside: avoid;
}
Alternately, column-count:.. could be used an then define a @media query for each breakpoint/width.
回答2:
You could use, like, math or somethin'.
$(()=>{
$(".splitme").each(function(){
var lens = [];
$(this).find("p").each(function(){lens.push($(this).text().length)});
var target_col_len = lens.reduce((a,i)=>a+i,0)/2;
var col_a = [], col_b = [], n = 0;
for(var i=0; i<lens.length; i++){
if(n+lens[i]<=target_col_len || Math.abs(n+lens[i]-target_col_len)<Math.abs(n-target_col_len)) col_a.push(i);
else col_b.push(i);
n+=lens[i];
}
var $c = $(this).clone();
var $col_a = $('<div class="col-6">'), $col_b = $('<div class="col-6">');
for(var i=0; i<col_a.length; i++) $col_a.append($c.find("p:eq("+i+")"));
for(var i=0; i<col_b.length; i++) $col_b.append($c.find("p:eq("+i+")"));
$(this).parent().empty().append($col_a).append($col_b);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12 splitme">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus nibh nisi, eget lobortis nisl efficitur eget. Fusce nec tincidunt felis, id tempor arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis feugiat diam. Morbi diam nisl, iaculis in elit eget, venenatis consectetur augue.
<p>Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu lacinia purus, quis facilisis massa erat a sapien. Phasellus mollis accumsan erat vel pharetra. Nulla semper cursus neque, nec pretium quam porta id. Duis pretium non diam sit amet rhoncus. Quisque dictum urna sed magna pretium, eget tincidunt ligula condimentum. Sed id risus vitae lectus condimentum eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus, diam dui lobortis ex, a scelerisque leo ligula porttitor velit. Duis ultricies risus urna, quis interdum tellus lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt id, pellentesque id nunc. Ut ultrices quam at lorem feugiat, eget laoreet sem auctor. In augue dolor, porta eget nulla sed, mattis euismod urna. Nullam vel sapien tellus. Vivamus et arcu at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a diam aliquam, vitae ultricies dui vulputate. Nulla id urna enim. Quisque varius neque vitae egestas hendrerit.
<p>Duis vitae imperdiet quam. Vestibulum congue finibus velit nec sagittis. Integer vel ex nulla. Nunc in urna dignissim, ullamcorper enim in, lobortis ligula. Vivamus tellus ligula, feugiat at diam ac, luctus vestibulum tortor. Cras congue magna vitae orci posuere volutpat. Duis eu eros rhoncus ligula auctor elementum. Fusce vulputate ante ut luctus fermentum. Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu, sit amet scelerisque tortor leo vel ligula. Praesent sem leo, volutpat sed erat vitae, consectetur maximus nibh. Ut at facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget, semper commodo libero. Aliquam metus tellus, facilisis ut posuere vel, lacinia id ex.
<p>Cras quis eros eleifend lorem tempus sodales. Sed semper sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel elit id sodales. Phasellus non lorem dolor. Ut viverra diam sed lacus tincidunt, vel lobortis sapien sodales. Praesent ante mi, iaculis sed erat vel, ultricies eleifend eros. Donec a libero vestibulum, dictum orci quis, scelerisque orci. Maecenas volutpat ex eu ex fermentum interdum.
<p>Cras ut elit risus. Sed semper mi mauris, vel bibendum augue pharetra efficitur. Vestibulum finibus elit sit amet velit blandit convallis et dignissim nisi. Etiam nec quam odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur ornare. Proin molestie purus sit amet lacinia hendrerit. Sed in elit mauris. Donec pretium sapien libero. Aliquam sed tempus lorem. Cras maximus eu urna vitae ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus lorem, condimentum at eros vitae, sagittis vestibulum elit. Sed placerat sapien urna, eget suscipit massa pharetra in. Nulla efficitur ac ipsum non varius.
<p>Donec quis consequat leo, in aliquet neque. Integer gravida faucibus diam id eleifend. Aenean at dolor nec ante aliquet consectetur. Nullam ullamcorper neque facilisis, faucibus nisl nec, volutpat elit. Fusce facilisis quis nisl sed lobortis. Suspendisse purus tellus, vulputate a tortor eu, pellentesque bibendum odio. Fusce nisl nisl, maximus non hendrerit non, accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et, pellentesque lobortis orci.</p>
</div>
</div>Edit.. The other guy's answer is much less stupid.. I'm upvoting him, you should too..
回答3:
My (admittedly weak) understanding of bootstrap tells me that class="col-lg-12 col-md-6" would make the width of the div containing the paragraphs 12 grid-units wide at "large" screen widths, and 6 units at "medium" screen widths — but it would not affect the number of columns of each paragraph ... the whole div would just be narrower.
Within that div, aside from bootstrap, you can do multiple columns with plain CSS using the columns or column-count property, as seen here:
div.row .multicol {
column-count: 2;
}<div class="row">
<div class="col-12 multicol">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque
nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus
nibh nisi, eget lobortis nisl efficitur eget. Fusce nec
tincidunt felis, id tempor arcu. Interdum et malesuada fames
ac ante ipsum primis in faucibus. Donec quis feugiat diam.
Morbi diam nisl, iaculis in elit eget, venenatis consectetur
augue.</p>
<p>Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu
lacinia purus, quis facilisis massa erat a sapien. Phasellus
mollis accumsan erat vel pharetra. Nulla semper cursus neque,
nec pretium quam porta id. Duis pretium non diam sit amet
rhoncus. Quisque dictum urna sed magna pretium, eget tincidunt
ligula condimentum. Sed id risus vitae lectus condimentum
eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus,
diam dui lobortis ex, a scelerisque leo ligula porttitor
velit. Duis ultricies risus urna, quis interdum tellus
lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt
id, pellentesque id nunc. Ut ultrices quam at lorem feugiat,
eget laoreet sem auctor. In augue dolor, porta eget nulla sed,
mattis euismod urna. Nullam vel sapien tellus. Vivamus et arcu
at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a
diam aliquam, vitae ultricies dui vulputate. Nulla id urna
enim. Quisque varius neque vitae egestas hendrerit.</p>
<p>Duis vitae imperdiet quam. Vestibulum congue finibus velit
nec sagittis. Integer vel ex nulla. Nunc in urna dignissim,
ullamcorper enim in, lobortis ligula. Vivamus tellus ligula,
feugiat at diam ac, luctus vestibulum tortor. Cras congue
magna vitae orci posuere volutpat. Duis eu eros rhoncus ligula
auctor elementum. Fusce vulputate ante ut luctus fermentum.
Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu,
sit amet scelerisque tortor leo vel ligula. Praesent sem leo,
volutpat sed erat vitae, consectetur maximus nibh. Ut at
facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget,
semper commodo libero. Aliquam metus tellus, facilisis ut
posuere vel, lacinia id ex.</p>
<p>Cras quis eros eleifend lorem tempus sodales. Sed semper
sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel
elit id sodales. Phasellus non lorem dolor. Ut viverra diam
sed lacus tincidunt, vel lobortis sapien sodales. Praesent
ante mi, iaculis sed erat vel, ultricies eleifend eros. Donec
a libero vestibulum, dictum orci quis, scelerisque orci.
Maecenas volutpat ex eu ex fermentum interdum.</p>
<p>Cras ut elit risus. Sed semper mi mauris, vel bibendum
augue pharetra efficitur. Vestibulum finibus elit sit amet
velit blandit convallis et dignissim nisi. Etiam nec quam
odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur
ornare. Proin molestie purus sit amet lacinia hendrerit. Sed
in elit mauris. Donec pretium sapien libero. Aliquam sed
tempus lorem. Cras maximus eu urna vitae ultricies. Orci
varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Quisque purus lorem, condimentum at
eros vitae, sagittis vestibulum elit. Sed placerat sapien
urna, eget suscipit massa pharetra in. Nulla efficitur ac
ipsum non varius.</p>
<p>Donec quis consequat leo, in aliquet neque. Integer gravida
faucibus diam id eleifend. Aenean at dolor nec ante aliquet
consectetur. Nullam ullamcorper neque facilisis, faucibus nisl
nec, volutpat elit. Fusce facilisis quis nisl sed lobortis.
Suspendisse purus tellus, vulputate a tortor eu, pellentesque
bibendum odio. Fusce nisl nisl, maximus non hendrerit non,
accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et,
pellentesque lobortis orci.</p>
</div>
</div>You could then have several @media rules with various min-width, max-width, along with orientation, aspect-ratio etc., whatever fits your needs, to get different numbers of columns in different situations.
(note I also added closing </p> tags to the paragraphs, which you should definitely do. Don't allow the browser to infer them. Sending invalid markup to the browser throws it (them) into "quirks mode" and all bets about how the browser is going to interpret it are off, so the structure of the DOM becomes unpredictable. All element selection whether from CSS or javascript (or bootstrap) is based on the structure of the DOM, not on the markup text itself.)
回答4:
This is a lot simpler than you're making it.
You can include multiple col classes in to be handled when the screen size changes. Simply include the ones for each screen size and bootstrap will handle the rest.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<p class="col-lg-12 col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus nibh nisi, eget lobortis nisl efficitur eget. Fusce nec tincidunt felis,
id tempor arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis feugiat diam. Morbi diam nisl, iaculis in elit eget, venenatis consectetur augue.
</p>
<p class="col-lg-12 col-md-6">Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu lacinia purus, quis facilisis massa erat a sapien. Phasellus mollis accumsan erat vel pharetra. Nulla semper cursus neque, nec pretium quam porta id. Duis pretium non diam sit amet rhoncus. Quisque
dictum urna sed magna pretium, eget tincidunt ligula condimentum. Sed id risus vitae lectus condimentum eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus, diam dui lobortis ex, a scelerisque leo ligula porttitor velit. Duis ultricies risus
urna, quis interdum tellus lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt id, pellentesque id nunc. Ut ultrices quam at lorem feugiat, eget laoreet sem auctor. In augue dolor, porta eget nulla sed, mattis euismod urna. Nullam vel sapien
tellus. Vivamus et arcu at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a diam aliquam, vitae ultricies dui vulputate. Nulla id urna enim. Quisque varius neque vitae egestas hendrerit.
</p>
<p class="col-lg-12 col-md-6">Duis vitae imperdiet quam. Vestibulum congue finibus velit nec sagittis. Integer vel ex nulla. Nunc in urna dignissim, ullamcorper enim in, lobortis ligula. Vivamus tellus ligula, feugiat at diam ac, luctus vestibulum tortor. Cras congue magna vitae
orci posuere volutpat. Duis eu eros rhoncus ligula auctor elementum. Fusce vulputate ante ut luctus fermentum. Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu, sit amet scelerisque tortor leo vel ligula. Praesent sem leo, volutpat sed
erat vitae, consectetur maximus nibh. Ut at facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget, semper commodo libero. Aliquam metus tellus, facilisis ut posuere vel, lacinia id ex.
</p>
<p class="col-lg-12 col-md-6">Cras quis eros eleifend lorem tempus sodales. Sed semper sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel elit id sodales. Phasellus non lorem dolor. Ut viverra diam sed lacus tincidunt, vel lobortis sapien sodales. Praesent ante mi, iaculis
sed erat vel, ultricies eleifend eros. Donec a libero vestibulum, dictum orci quis, scelerisque orci. Maecenas volutpat ex eu ex fermentum interdum.
</p>
<p class="col-lg-12 col-md-6">Cras ut elit risus. Sed semper mi mauris, vel bibendum augue pharetra efficitur. Vestibulum finibus elit sit amet velit blandit convallis et dignissim nisi. Etiam nec quam odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur ornare. Proin
molestie purus sit amet lacinia hendrerit. Sed in elit mauris. Donec pretium sapien libero. Aliquam sed tempus lorem. Cras maximus eu urna vitae ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque
purus lorem, condimentum at eros vitae, sagittis vestibulum elit. Sed placerat sapien urna, eget suscipit massa pharetra in. Nulla efficitur ac ipsum non varius.
</p>
<p class="col-lg-12 col-md-6">Donec quis consequat leo, in aliquet neque. Integer gravida faucibus diam id eleifend. Aenean at dolor nec ante aliquet consectetur. Nullam ullamcorper neque facilisis, faucibus nisl nec, volutpat elit. Fusce facilisis quis nisl sed lobortis. Suspendisse
purus tellus, vulputate a tortor eu, pellentesque bibendum odio. Fusce nisl nisl, maximus non hendrerit non, accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et, pellentesque lobortis orci.</p>
</div>
</div>来源：https://stackoverflow.com/questions/48953580/automatically-splitting-text-content-into-even-columns