css +div实现两列多行样式实例代码

记得以前用table进行网页布局时对于左右二列多行时觉得很麻烦,现在用css +div 来实现,我们只要设置大div的总宽,然后里面要排列的div只要二个宽度不大小总和小大div 总就会了,

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>
<html xmlns=””>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style>
#b{ width:300px;}
#b a{width:148px; display:block; float:left;}
</style>
</head>

如上面的蓝色字我们的二列左右布局就出来了,简单吧.下面我们来看看div代码

<a href=”browser.php?tid=5″>女性保健</a>
<a href=”browser.php?tid2=30″>私处护理</a> <a href=”browser.php?tid2=31″>乳房保健</a> <a href=”browser.php?tid2=32″>内分泌调节</a> <a href=”browser.php?tid2=33″>补血排卵白带</a> <a href=”browser.php?tid2=34″>明星保健</a> <a href=”browser.php?tid2=35″>白领保健</a>

<a href=”browser.php?tid=8″>健身增肥瑜伽</a>
<a href=”browser.php?tid2=46″>卧室健身</a> <a href=”browser.php?tid2=47″>做家务健身</a> <a href=”browser.php?tid2=48″>增肥常识</a> <a href=”browser.php?tid2=49″>其它方法</a>

<a href=”browser.php?tid=9″>保健饮食</a>
<a href=”browser.php?tid2=50″>营养搭配</a> <a href=”browser.php?tid2=51″>养生保健品</a> <a href=”browser.php?tid2=52″>亚健康</a> <a href=”browser.php?tid2=53″>疾病预防</a>

<a href=”browser.php?tid=10″>美容整形减肥</a>
<a href=”browser.php?tid2=54″>药妆</a> <a href=”browser.php?tid2=55″>美白保湿</a> <a href=”browser.php?tid2=56″>去痘</a> <a href=”browser.php?tid2=57″>减肥</a>

<a href=”browser.php?tid=11″>皮肤科疾病</a>
<a href=”browser.php?tid2=58″>皮肤过敏</a> <a href=”browser.php?tid2=59″>水痘脚气</a> <a href=”browser.php?tid2=60″>其它问题</a>

<a href=”browser.php?tid=12″>五官科疾病</a>
<a href=”browser.php?tid2=61″>近视眼</a> <a href=”browser.php?tid2=62″>口腔溃疡</a> <a href=”browser.php?tid2=63″>儿童龋齿</a> <a href=”browser.php?tid2=64″>红眼病</a> <a href=”browser.php?tid2=65″>鼻窦炎</a> <a href=”browser.php?tid2=66″>牙周病</a> <a href=”browser.php?tid2=67″>其它</a>

<a href=”browser.php?tid=16″>育儿指南</a>
<a href=”browser.php?tid2=78″>怀孕分娩</a> <a href=”browser.php?tid2=79″>幼儿教育</a> <a href=”browser.php?tid2=80″>宝宝呵护小儿喂养</a>

</div>
</body>
</html>
来看看效果图.

本站原创转请注明来自

相关文章：

你感兴趣的文章：

标签云：