如果是2列以上，要求上下对齐，用什么标签比較好？

uranas 2013-10-22 09:17:01

例如：
A１２３　A１２
B１　　　B１

在以前肯定用「table」、可现在动不动就用「div」,「ul」．．．

如果不用「table」、用什么标签比較好？该如何写CSS？

...全文

293 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

时间刻画 2013-11-19

打赏
举报

说实话像这样的效果，用table做是最好的。。使用什么标签要合适，简便。。例如，你做一个表格，用table很简单，而用div做则会非常麻烦。用div和ul做


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	.column1,.column2{width:70px; float:left;}
	li{list-style-type:none;}
</style>
</head>

<body>
	<div class="demo">
    	<div class="column1">
        	<ul>
            	<li>A123</li>
                <li>B1</li>
            </ul>
        </div>
        <div class="column2">
        	<ul>
            	<li>A12</li>
                <li>B1</li>
            </ul>
        </div>
    </div>
</body>
</html>

lixujin123 2013-11-18

打赏
举报

楼主说的上下都能对其，可以随便给写个标签。只要保证每个div的宽度一样，这样，下一个div的起点就是一样，就能保证对齐。比如：


 <div class="war">
    <div class="A">A１２３</div>   <div class="B">A１２</div>
    <div class="A">B１２</div>     <div class="B">B２３</div>
    <div class="A">C1</div>       <div class="B">C2</div>
   
</div>

不过，对应的div的一些float，和margin等值都需要写对应的css噢~

易墨coding 2013-11-16

打赏
举报

能用table解决的问题为什么不用table呢？杀鸡焉用牛刀

qq2460857094 2013-11-13

打赏
举报

DIV实现的方法很多 1、可用两列DIV，第一列DIV里面的内容会根据最长宽度的那一行字给撑宽。 2、固定每个元素的宽度，然后每个元素都float:left;

suchcl 2013-11-13

打赏
举报

问题的焦点不是使用table或div，而是看怎么能够实现你的需求，达到你的目标，另外还好考虑到代码的维护成本，这一点很重要。我见过一切图的哥们，就把图片直接切碎了，然后绝对定位，虽然实现了网页效果，给技术同学套页面的时候，苦逼了。

李尸尸 2013-11-11

打赏
举报

<dl> <dd>a1</dd> <dd>a2</dd> <dd>a1</dd> <dd>a2</dd> </dl> 定义DL和DD标签。

新疆路游 2013-10-22

打赏
举报


<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<div class="clearFloat"></div>


*{
    border:0;
    margin:0;
    padding:0;
}
li{
    list-style:none;
}
.list{
    width:600px;
}
.list li{
    background-color:#D2D1FE;
    float:left;
    display:inline;
    width:195px;
    margin-left:5px;
    margin-top:5px;
    height:20px;
}
.clearFloat{
    clear:both;
    float:none;
}

uranas 2013-10-22

打赏
举报

找到一个很不错的例子！ <!doctype html> <html> <head> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <title>Test</title> </head> <body> <style type="text/css"> body { margin:5px; background-color:#999; border-collapse:collapse; } #table { display:table; } .row { display:table-row; } .row>div { display:table-cell; margin:15px; padding:15px; border:10px solid; background-color:#eee; } </style> <div id="table"> <div class="row"> <div> A１２３ </div> <div> A１２ </div> </div> <div class="row"> <div> B１ </div> <div> B </div> </div> </div> </body> </html>

uranas 2013-10-22