使用CSS或JavaScript自动两列 [英] Automatic two columns with CSS or JavaScript

问题描述

我目前正在开发一个网站，我的客户希望各种文章的文本溢出到两列。种类在报纸上？所以它看起来像：

 今天在威尔士，有人实际上没有人被伤害在
做了一些有趣的事情。事件，虽然一个
当局受到这个老年受害者接受
发展和逮捕了咨询的困惑。 
犯罪者。 
  

[我真的很想尝试写一些东西]

有没有办法，我可以做到这一点只使用CSS？我不想使用多个div。我也开放使用JavaScript，但我 - 真的是坏的，所以帮助将不胜感激。我在想，也许JavaScript可以计算在内容div有多少< p>，然后移动它们的第二半是浮动的基于这一点？也许？建议感谢：D

解决方案

好消息是，有一个 CSS only solution 。坏消息是，在现有浏览器中没有任何主要支持。如果它被实现，它将看起来像这样：

  div.multi {
 column-count：3 
 column-gap：10px; 
 column-rule：1px solid black; 
} 
  

我认为现在你最好的赌注可能是服务器端， / p>

I'm currently developing a website and my client wants the text of various articles to overflow into two columns. Kind of like in a newspaper? So it would look like:

Today in Wales, someone actually      Nobody was harmed in
did something interesting.            the incident, although one 
Authorities are baffled by this       elderly victim is receiving
development and have arrested the     counselling.
perpetrator.     

[my really bad attempt at coming up with something to write]

Is there a way I can do this with just CSS alone? I'd prefer not to have to use multiple divs. I'm open to using JavaScript too, but I'm -really- bad at that, so help would be appreciated. I was thinking maybe JavaScript could count how many <p>'s there are in the content div, and then move the second half of them to be floated right based on that? Maybe? Advices would be appreciated :D

解决方案

the good news is, there is a CSS only solution. the bad news is, there isn't any major support for it in existing browsers. if it was implemented, it would look like this:

div.multi {
  column-count: 3
  column-gap: 10px;
  column-rule: 1px solid black;      
}

i think for now your best bet is probably server side as mentioned by monoxide

这篇关于使用CSS或JavaScript自动两列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！