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%;
}
=====================
下载地址:http://files.cnblogs.com/files/leshao/dt-list.rar
dt dl列表布局的更多相关文章
- [课程设计]Scrum 2.1 多鱼点餐系统开发进度(下单列表布局)
[课程设计]Scrum 2.1 多鱼点餐系统开发进度(下单列表布局) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店 ...
- css + div 列表布局
常见列表布局,效果如下图.常见图与图之间经常会留间距,下图图与图没留间距 1.第一种列表布局:float + margin 1.2.第一种列表布局相应代码 <!DOCTYPE html> ...
- android搜索框列表布局,流程及主要步骤思维导图
android搜索框列表布局,流程及主要步骤思维导图 android搜索框列表布局,流程及主要步骤思维导图 activity_coin_search.xml----------<com.scwa ...
- android开发 RecyclerView 瀑布列表布局
1.写一个内容的自定义小布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...
- android 开发 RecyclerView 横排列列表布局
1.写一个一竖的自定义布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xml ...
- android开发 RecyclerView 列表布局
创建一个一行的自定义布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...
- 【前端】Vue.js实现网格列表布局转换
网格列表布局转换 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title& ...
- 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭
一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...
- DD DT DL标签
我们平时常用的是< ul>< li>标签,不过dd.dt标签也蛮不错,特别是发布程序的时候功能模块列表什么的可以使用它来排版. < dl>< /dl>& ...
随机推荐
- css走过的坑
css盒模型 1.内联元素 设置宽高无效.margin左右有效上下无效.padding都有效 会被当做字体所以内联之间有间隙 父级元素要设置font-size:0; 内联元素:a.b.button.e ...
- jquery on的常用 用法
定义和用法 on()方法在被选元素及子元素上添加一个或多个方法. 提示:使用on方法添加的事件处理程序适用于当前及未来的元素(javascript创建的) 提示:移除事件处理程序使用off()方法,如 ...
- iOS开发-自己定义后台显示图片(iOS7-Background Fetch的应用)
之前在用电池医生的时候, 发现它有这样一个功能:当应用进入后台的时候, 会显示另外一张图片覆盖App Switcher显示的界面. 效果例如以下: 变成----> 而这种一个功能, 对于保护用户 ...
- TRIZ系列-创新原理-26-复制原理
复制原理的详细表述例如以下:1)用简化的,廉价的复制品来替代易碎的或不方便操作的物体; 这样能够减少成本,提高可操作性.2)假设已经使用了可见光的复制品,那么使用红外光或者紫外光的复制品: ...
- javascript跳跃式前进(3) - 跳入JSON
前言 JSON崛起不是意外,是顺应时代;相当简洁小巧的书写模式及阅读方式; 基础 看这篇文章: JSON知识点汇总_W3SCHOOL 初步进阶 早期的解析仅仅实用eval() ,可是这货太easy给注 ...
- poj 2299 Ultra-QuickSort(树状数组求逆序数+离散化)
题目链接:http://poj.org/problem?id=2299 Description In this problem, you have to analyze a particular so ...
- 模拟教室网络(跨VLAN,跨网段通讯)
要求: 1,跨VLAN,三个教室在不同的VLAN中,翻番至网络风暴 2,三个VLAN在三个不同的网段 3,设置访问控制列表,组织每个网段的前八个IP不可访问服务器 4,其他IP均可访问外网的服务器 操 ...
- 《分布式系统原理介绍》【PDF】下载
内容简介 分布式系统理论体系非常庞大,涉及知识面也非常广博,本文精心选择了部分在工程实践中应用广泛.简单有效的分布式理论.算法.协议加以介绍.全文分为两大部分,第一部分介绍了分布式系统的一些基本概念并 ...
- ES6之遍历器(Iterator)
什么是Iterator?他是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署上Iterator接口就可以完成遍历操作(PS:个人认为他的这个遍历就是c语言里面的指针),他的作用有 ...
- HTTP之URL分解
HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接.URL是一种特殊类型的URI,包含了用于查找某个资源的足够的信息 URL,全称是U ...