Question

CSS如何使多行数据变成两列多行？

CSS如何使多行数据变成两列多行？

变成三列也可以

111111111111
222222222222
333333333333
444444444444

变成

11111111 22222222
33333333 44444444
知道的朋友能不能写的详细点？我是新手不太懂。

Answer 1

首先你要有一个合理的布局：
<div class="box">
<ul class="list">
<li>1111111111111</li>
<li>2222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
</ul>
</div>

用一个盒子包住一个无序列表，把盒子模型的宽度固定，当li没有宽度的时候，它就是单列的，当li有宽度而且浮动的时候，可以随意变成多列多行。
现在假设盒子模型宽是450~左右内边距是10：

样式一（一列多行）：
*{padding:0;margin:0;}//初始化内外补白
li{list-style:none;}//初始化列表
.box{width:450px;padding:10px;}
.box .list li{line-height:24px;}

样式二（二列多行）：
*{padding:0;margin:0;}//初始化内外补白
li{list-style:none;}//初始化列表
.box{width:450px;padding:10px 0 10px 10px;}//这时候列表的宽度只剩下450-10=440,可以把宽度定为210加10右边外补白
.box .list{zoom:1}
.box .list:after{content:"";height:0;clear:both;display:block;}//清除浮动
.box .list li{widht:210px;line-height:24px;float:left;margin-left:10px;_display:inline;}//两个220刚好440的宽

Answer 2

不能实现，重新布局吧。

<div style="float:left;margin-right:10px;">
左边的
</div>

<div style="float:left;margin-right:10px;">
中间的
</div>

<div style="float:left;">
右边的
</div>

Answer 3

可以在外层容易定义一个width。
每行数据可以用<li>标签，这样会方便一点。css中也设置一个宽度，并加入float:left;。
这样就按照宽度来自动换行了。^^

Answer 4

首页你的数据HTML书写要规范。例如用ul+li无序列表写

<ul class="ul0">
  <li>111111111111</li>
  <li>222222222222</li>
  <li>333333333333</li>
  <li>444444444444</li>
</ul>

这样子的话排版非常方便。用CSS浮动和宽来控制几行几列，示例代码如下：

<style>
*{margin:0;padding:0;}
body{font:16px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, System;background-color:#FFF;}/*\9ED1\4F53黑体*/
li{list-style:none;}
.ul0{border:solid 1px #999;width:600px;}
.ul1{border:solid 1px #999;width:600px;overflow:hidden;}
.ul1 li{width:50%;float:left;}
.ul2{border:solid 1px #999;width:600px;overflow:hidden;}
.ul2 li{width:33%;float:left;}
</style>
<ul class="ul0">
  <li>111111111111</li>
  <li>222222222222</li>
  <li>333333333333</li>
  <li>444444444444</li>
</ul>
<ul class="ul1">
  <li>111111111111</li>
  <li>222222222222</li>
  <li>333333333333</li>
  <li>444444444444</li>
</ul>
<ul class="ul2">
  <li>111111111111</li>
  <li>222222222222</li>
  <li>333333333333</li>
  <li>444444444444</li>
</ul>

Answer 5

用表格table