DL.DT.DD implements a simple example of left and right layout-CSS Tutorial-php.cn

this is a question that someone sent an email to ask today. the original idea was to use the ul list to implement it; but there are two troublesome places in this way:
1. if you use ul for layout, the one on the right column is more troublesome;
2. it is troublesome to adapt the borders outside the text;
3. the height may have to be fixed;
so, take a closer look at this layout and think about using dl. dt.dd is reasonable:
1. the layout is more reasonable;
2. it will be easy to expand in the future;
3. there must be very little css;
i tried to write it, it’s okay to take a look! within control!
of course it goes without saying about layout distribution:

<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>

Copy after login

css part:

<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>

Copy after login

look at the effect:

<!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>

Copy after login

what if we say fixed width?

<!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>

Copy after login

for a related example, i have written one before:

<!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 implements a simple example of left and right layout" > </dt> 
    <dd>母亲节-祝福短信</dd> 
  </dl> 
  <dl> 
    <dt> <img  src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" / alt="DL.DT.DD implements a simple example of left and right layout" > </dt> 
    <dd>母亲节-祝福短信</dd> 
  </dl> 
  <dl> 
    <dt> <img  src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" / alt="DL.DT.DD implements a simple example of left and right layout" > </dt> 
    <dd>母亲节-祝福短信</dd> 
  </dl> 
  <dl> 
    <dt> <img  src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" / alt="DL.DT.DD implements a simple example of left and right layout" > </dt> 
    <dd>母亲节-祝福短信</dd> 
  </dl> 
  <dl> 
    <dt> <img  src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" / alt="DL.DT.DD implements a simple example of left and right layout" > </dt> 
    <dd>母亲节-祝福短信</dd> 
  </dl>   
</div> 
</body> 
</html>

Copy after login