DL.DT.DD實作左右的佈局簡單例子
- PHP中文网原創
- 2016-05-16 12:06:391786瀏覽
這是今天有人發郵件問的一個問題,最開始的想法是用ul列表來實現;但是這樣用出現兩個比較麻煩的地方：
1、如果用ul還佈局，右邊一欄位比較麻煩；
2、文字外邊的邊框自適應比較麻煩；
3、很可能要定死高度；
所以，細細地看一看這個佈局，想一想還是用dl. dt.dd作是合理的：
1、佈局合理一些；
2、將來擴展很方便；
3、css一定很少；
試著寫了寫，看一看還行！在可控範圍內！
佈局布分當然不用說了：
<h1>标题</h1> <div> <dl> <dt><a href="32">·博客里的文章是我自己写的！</a></dt> <dd>作者：张三</dd> </dl> <dl> <dt><a href="3232">·博客里的文章是我自己写的！</a></dt> <dd>作者：张三</dd> </dl> <dl> <dt><a href="3232">·博客里的文章是我自己写的！</a></dt> <dd>作者：张三</dd> </dl>........... </div>
css部分：
<style>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366ff}
dd{ position:absolute; right:5px;}
h1{clear:both;font-size:14px;}
</style>看一下效果：
<!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" />
<style>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366ff}
dd{ position:absolute; right:5px;}
h1{clear:both;font-size:14px;}
</style>
</head>
<body>
<h1>test</h1>
<div>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
</div>
<h1>test</h1>
<div>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
</div>
</body>
</html>如果說定寬？
<!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" />
<style>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;width:100%}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366ff}
dd{ float:right}
h1{clear:both;font-size:14px;}
div{ width:500px; float:left;}
</style>
</head>
<body>
<h1>标题</h1>
<div>
<dl>
<dt><a href="32">·博客里的文章是我自己写的！</a></dt>
<dd>作者：张三</dd>
</dl>
<dl>
<dt><a href="3232">·博客里的文章是我自己写的！</a></dt>
<dd>作者：张三</dd>
</dl>
<dl>
<dt><a href="3232">·博客里的文章是我自己写的！</a></dt>
<dd>作者：张三</dd>
</dl>
<dl>
<dt><a href="eeqwewq">·博客里的文章是我自己写的！</a></dt>
<dd>作者：张三</dd>
</dl>
<dl>
<dt><a href="ewqewq">·博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="ewqe">·博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="ewqe">·博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
</div>
<h1>标题</h1>
<div>
<dl>
<dt><a href="#">·博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
<dl>
<dt><a href="#">·博客里的文章是我自己写的！</a></dt>
<dd>xxx</dd>
</dl>
</div>
</body>
</html>相關的例子，我以前也寫過一個：
<!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></title>
<style>
*{ margin:0; padding:0;}
#box{ margin:10px; padding:10px; float:left; border:1px solid #CCC; background:#FFFFCC; font-size:12px; line-height:1.9;}
dl{ background:#CCCC00; margin:0; width:120px; text-align:center; float:left; margin:5px;}
dt{ background:#CC0033;}dt img{display:block; margin:0 auto;}
dd{ background:#FFFF00; }
</style>
</head>
<body>
<div id="box">
<dl>
<dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" / alt="DL.DT.DD實作左右的佈局簡單例子" > </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" / alt="DL.DT.DD實作左右的佈局簡單例子" > </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" / alt="DL.DT.DD實作左右的佈局簡單例子" > </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" / alt="DL.DT.DD實作左右的佈局簡單例子" > </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" / alt="DL.DT.DD實作左右的佈局簡單例子" > </dt>
<dd>母亲节-祝福短信</dd>
</dl>
</div>
</body>
</html>陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn