内容简介：翻译自：https://stackoverflow.com/questions/5484215/how-to-make-floating-div-list-appear-in-columns-not-rows
应用程序生成的大型字母列表,我需要在网页上输出它.生成的标记如下所示：
<div class="list_item">A</div> <div class="list_item">B</div> <div class="list_item">C</div> <div class="list_item">D</div> <div class="list_item">E</div> <div class="list_item">F</div> <div class="list_item">G</div> <div class="list_item">H</div> ...
样式表如下所示：
.list_item {
margin: 5px;
padding: 5px;
border: 1px solid gray;
width: 200px;
float: left;
}
渲染结果：
正如你所看到的,这不是很易读,我希望DIV可以输出两列,所以第一列包含“A B C D”,第二列包含“E F G H”.
有没有办法做到这一点,而不改变标记？为偶数和奇数div添加不同的类是可能的,但由于div是在循环中输出的,因此不能以不同方式对它们进行拆分.
观看演示： http://jsfiddle.net/KZcCM/
注意：我已经通过 PHP 将列表拆分为两部分来解决它,但我想知道,如果这里有HTML / CSS解决方案.
根据您需要支持的浏览器,您可以使用新的CSS3 column-count属性.
用简单的列表标记
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
使用这个CSS：
ul {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}
Here is a fiddle – 虽然在任何版本的IE中都不支持它.为了支持旧版浏览器,你可以使用jQuery解决方案,例如 Columnizer jQuery Plugin ,或者代替CSS3解决方案,
翻译自：https://stackoverflow.com/questions/5484215/how-to-make-floating-div-list-appear-in-columns-not-rows
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
数据结构与算法分析(C++版)(第3版)
Clifford A. Shaffer / 张铭、刘晓丹、等译 / 电子工业出版社 / 2013 / 59.00元
本书采用当前流行的面向对象的C++程序设计语言来描述数据结构和算法， 因为C++语言是程序员最广泛使用的语言。因此， 程序员可以把本书中的许多算法直接应用于将来的实际项目中。尽管数据结构和算法在设计本质上还是很底层的东西， 并不像大型软件工程项目开发那样， 对面向对象方法具有直接的依赖性， 因此有人会认为并不需要采用高层次的面向对象技术来描述底层算法。 但是采用C++语言能更好地体现抽象数据类型的......一起来看看 《数据结构与算法分析(C++版)(第3版)》 这本书的介绍吧!
