search

Home >Web Front-end >CSS Tutorial >DL.DT.DD implements a simple example of left and right layout

DL.DT.DD implements a simple example of left and right layout

PHP中文网
PHP中文网Original
2016-05-16 12:06:391788browse

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>

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>

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>

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>

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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use iframe margin to call a certain area of ​​other web pages_Experience exchangeNext article：How to use iframe margin to call a certain area of ​​other web pages_Experience exchange

Related articles

See more