HTML/CSS列表列排序
HTML/CSS列表列排序
提问于 2014-04-01 09:41:21
当我使用列函数时，我在对LI标记排序时遇到了一些小问题。默认情况下，它是正常排序的，但我必须使用CSS中的列，之后我的列表如下：
1-6
2-7
3-8
4-9
5- 10
但我需要这样的东西：
1-2
3-4
5-6
7-8
9- 10
这是我的代码：小提琴
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-04-01 10:57:46
JSFiddle链路
CSS
.grid_1, .grid_2 {
margin-left : 1.00%;
margin-right : 1.00%;
margin-bottom : 15px !important;
float : left;
display : block;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
.grid_1 {
width: 98%;
}
.grid_2 {
width: 48%;
}
.bg {
background-color:#ccc;
}HTML:
<div class="grid_1 ">
<div class="grid_2">
<div class="grid_1 bg">1</div>
<div class="grid_1 bg">3<br> dgdgdfgdfg<br> sdrfsdrfrter</div>
<div class="grid_1 bg">5</div>
<div class="grid_1 bg">7</div>
<div class="grid_1 bg">9</div>
<div class="grid_1 bg">11</div>
</div>
<div class="grid_2">
<div class="grid_1 bg">2</div>
<div class="grid_1 bg">4</div>
<div class="grid_1 bg">6</div>
<div class="grid_1 bg">8</div>
<div class="grid_1 bg">10</div>
<div class="grid_1 bg">12</div>
</div>
</div>Stack Overflow用户
发布于 2014-04-01 10:21:10
我在使用一个ul的多列列表找到了路。
我试着用它。这是演示
演示代码如下：
ul {
clear: both;
width:450px;
margin-bottom:20px;
overflow:hidden;
}
li {
line-height:1.5em;
border-bottom:1px solid #ccc;
float:left;
display:inline;
margin-right: 10%;
}
#double li {
width:40%;
}Stack Overflow用户
发布于 2014-04-01 09:47:27
您可以尝试这样添加float:left并将box-sizing:border-box;定义如下
ul {
clear: both;
margin: 0px auto;
padding: 10px 0px 0 0px;
width: 450px;
z-index: 9; }
ul li {
background:#ededed;
float:left;
min-height:100px;
width:50%;
-webikit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
list-style: none;
margin-bottom: 10px;
padding: 0px;
}演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22782062
复制相关文章
相似问题
腾讯云开发者
