项目需要中

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

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

开始想到使用 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列表布局的更多相关文章

  1. [课程设计]Scrum 2.1 多鱼点餐系统开发进度(下单列表布局)

    [课程设计]Scrum 2.1 多鱼点餐系统开发进度(下单列表布局) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店 ...

  2. css + div 列表布局

    常见列表布局,效果如下图.常见图与图之间经常会留间距,下图图与图没留间距 1.第一种列表布局:float + margin 1.2.第一种列表布局相应代码 <!DOCTYPE html> ...

  3. android搜索框列表布局,流程及主要步骤思维导图

    android搜索框列表布局,流程及主要步骤思维导图 android搜索框列表布局,流程及主要步骤思维导图 activity_coin_search.xml----------<com.scwa ...

  4. android开发 RecyclerView 瀑布列表布局

    1.写一个内容的自定义小布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...

  5. android 开发 RecyclerView 横排列列表布局

    1.写一个一竖的自定义布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xml ...

  6. android开发 RecyclerView 列表布局

    创建一个一行的自定义布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  7. 【前端】Vue.js实现网格列表布局转换

    网格列表布局转换 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title& ...

  8. 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭

    一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...

  9. DD DT DL标签

    我们平时常用的是< ul>< li>标签,不过dd.dt标签也蛮不错,特别是发布程序的时候功能模块列表什么的可以使用它来排版. < dl>< /dl>& ...

随机推荐

  1. Android关于AutoService、Javapoet讲解

    一.上篇文章提到自定义processor中用到AutoService 文章中我们用到了AutoService, 使用@AutoService(Processor.class),编译后 MethodSp ...

  2. Scala入门系列(十三):类型参数

    引言 Scala中类型参数是什么呢?其实就类似于Java中的泛型.定义一种类型参数,比如在集合.类.函数中定义类型参数,然后就可以保证使用到该类型参数的地方就只能是这种类型,从而实现程序更好的健壮性. ...

  3. UGUI表情系统&超链接解决方案

    最近帮一个同事解决图文混排的问题,发现了一种犀利的UGUI表情系统的解决方案 https://blog.uwa4d.com/archives/Sparkle_UGUI.html 使用重新生成UGUI文 ...

  4. poj 3168 Barn Expansion 几何yy

    题链:http://poj.org/problem? id=3168 Barn Expansion Time Limit: 1000MS   Memory Limit: 65536K Total Su ...

  5. 2015级C++第4周项目 函数

    [项目1-求最大公约数] 參考解答 (1)输入两个数.并求出其最大公约数 #include <iostream> using namespace std; //自己定义函数的原型(即函数声 ...

  6. Android的init过程:init.rc解析流程

    这几天打算看下安卓的代码,看优秀的源代码也是一种学习过程,看源代码的过程就感觉到,安卓确实是深受linux内核的影响,不少数据结构的使用方法全然一致.花了一中午时间,研究了下init.rc解析过程,做 ...

  7. Highway LSTM 学习笔记

    Highway LSTM 学习笔记 zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouwan  2016-4-5   声明 1)该Dee ...

  8. 如何通过Mock API提高APP开发效率?

    APP开发过程中,如果可以在客户端的正常项目代码中,自然地(不影响最终apk)添加一种模拟服务器数据返回的功能,这样就可以很方便的在不依赖服务器的情况下展开客户端的开发. Mock API提供了这一问 ...

  9. 【功能代码】---3 JS判断字符串是否包含某个字符串

    JS判断字符串是否包含某个字符串 var str ="abc"; if(str.indexOf("bc")>-1){ alert('str中包含bc字符串 ...

  10. 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

    § 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...