html – 如何使浮动DIV列表出现在列中,而不是行

栏目: Html · 发布时间: 5年前

内容简介:翻译自:https://stackoverflow.com/questions/5484215/how-to-make-floating-div-list-appear-in-columns-not-rows
我手上有一个HTML布局拼图.我有一个由我的 PHP

应用程序生成的大型字母列表,我需要在网页上输出它.生成的标记如下所示:

<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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Go程序设计语言

Go程序设计语言

艾伦 A. A. 多诺万 / 李道兵、高博、庞向才、金鑫鑫、林齐斌 / 机械工业出版社 / 2017-5 / 79

本书由《C程序设计语言》的作者Kernighan和谷歌公司Go团队主管Alan Donovan联袂撰写,是学习Go语言程序设计的指南。本书共13章,主要内容包括:Go的基础知识、基本结构、基本数据类型、复合数据类型、函数、方法、接口、goroutine、通道、共享变量的并发性、包、go工具、测试、反射等。 本书适合作为计算机相关专业的教材,也可供Go语言爱好者阅读。一起来看看 《Go程序设计语言》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

html转js在线工具
html转js在线工具

html转js在线工具