这是今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方：

1、如果用UL还布局，右边一栏比较麻烦；

2、文字外边的边框自适应比较麻烦；

3、很可能要定死高度；

所以，细细地看一看这个布局，想一想还是用DL.DT.DD作是合理的：

1、布局合理一些；

2、将来扩展很方便；

3、CSS一定很少；

试着写了写，看一看还行！在可控范围内！

布局布分当然不用说了：

标题

·博客里的文章是我自己写的！: 作者：张三

·博客里的文章是我自己写的！: 作者：张三

·博客里的文章是我自己写的！: 作者：张三

...........

CSS部分：

*{ 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;}

看一下效果：

*{ 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;}

test

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

test

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

·我是女生！博客里的文章是我自己写的！: xxx

如果说定宽？

*{ 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;}

标题

·博客里的文章是我自己写的！: 作者：张三

·博客里的文章是我自己写的！: 作者：张三

·博客里的文章是我自己写的！: 作者：张三

·博客里的文章是我自己写的！: 作者：张三

·博客里的文章是我自己写的！: xxx

·博客里的文章是我自己写的！: xxx

·博客里的文章是我自己写的！: xxx

标题

·博客里的文章是我自己写的！: xxx

·博客里的文章是我自己写的！: xxx

·博客里的文章是我自己写的！: xxx

·博客里的文章是我自己写的！: xxx

·博客里的文章是我自己写的！: xxx

·博客里的文章是我自己写的！: xxx

·博客里的文章是我自己写的！: xxx

相关的例子，我以前也写过一个：

*{ 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; }

母亲节-祝福短信

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

php dt dd,DL.DT.DD实现左右的布局简单例子相关推荐

前端之dl dt dd vs tr td th
dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍结构语法 dl dt dd案例 dl dt dd总结一. ...
dl dt dd标签具体用法
一般我们在做列表的时候通常只会用到ul和li标签,至于DL一般都很少用到,它也属于列表类的标签,下面说一下大概的用法: <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<d ...
常用CSS元素div ul dl dt ol的简单解释
几个css元素的简单解释 div ul dl dt oldiv,这个很常见,块级元素,div尽量少用,和table一样,嵌套越少越好 ol 有序列表. <ol> <li>--& ...
dl,dt,dd,ul,li,ol区别
dl.dt.dd也是列表项,不过它们被忽视得比较厉害,人们只知道ul.ol.li,却经常漠视它们的存在,其实有时候,dl.dt.dd也是非常好用的,这两个家族是近亲,很多地方都是一模一样. dl类似u ...
用标准dl,dt,dd标签抛弃table列表
过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难. 现在,越来越多的前端开发er们开始使用xHTML+CSS替代 ...
DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
网页制作小技巧：dl dt dd标签用法
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd> 一般我们在做列表的时候通 ...
html中dl标签和ul标签,html中dl,dt,dd,ul,li,ol标签区别和使用
html中dl,dt,dd,ul,li,ol标签区别和使用时间:2013-04-12 21:48 来源:未知 | 作者:易享学习网 | 本文已影响人 ul: unordered lists ol: ...
用dl元素编辑html个人信息,html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法一.dl dt dd认识 - TOP html 是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与tabl ...

php dt dd,DL.DT.DD实现左右的布局简单例子

标题

test

test

标题

标题

php dt dd,DL.DT.DD实现左右的布局简单例子相关推荐

最新文章

热门文章