css +div實現兩列多行樣式執行個體代碼

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

記得以前用table進行網頁布局時對於左右二列多行時覺得很麻煩,現在用css +div 來實現,我們只要設定大div的總寬,然后里面要排列的div只要二個寬度不大小總和小大div 總就會了,

<!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=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>
來看看效果圖.

本站原創轉請註明來自www.111cn.net/cssdiv/css.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More