dt dl列表布局

项目需要中

左边是房屋地址,右边显示几套房屋,如下图显示

============

开始想到使用 div标签,里面嵌套几个span,但是不利于对齐显示,一行还可以,多行了不方便

查找使用dl dt布局实现

---------------------------html---------------------------------------------

<dl>
<dt>房产地址:</dt>
<dd>1.北京市海淀区大兴路</dd>
<dd>1.北京市海淀区大兴路</dd>
<dd>1.北京市海淀区大兴路</dd>
<dt>房产地址:</dt>
<dd>1.北京市海淀区大兴路</dd>
<dd>1.北京市海淀区大兴路</dd>
<dd>1.北京市海淀区大兴路</dd>
</dl>

---------------------------css---------------------------------------------

已经在开始css reset设置了

dl, dt, dd{

padding:0;

margin:0;

}

这样清除了默认间距

section dt{
float: left;/*因为是块元素,如果不添加这个浮动,会第一行是标题,下面是内容.为了上去,给dt添加浮动,上去,在 margin-left撑开距离即可*/
margin-right: 10px;
}
section dd{
margin-left: 70px;
line-height: 140%;
}

=====================

下载地址:https://files.cnblogs.com/files/leshao/dt-list.rar

 

posted @ 2016-04-07 17:22  乐少007  阅读(433)  评论(0编辑  收藏  举报