项目需要中

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

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

开始想到使用 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. google protocol buffer的原理和使用(四)

    有个电子商务的系统(如果用C++实现).当中的模块A须要发送大量的订单信息给模块B.通讯的方式使用socket. 如果订单包含例如以下属性: ----------------------------- ...

  2. vim 命令整理(自己经常使用)

    vimm(vimsual)是Linux/UNIX系列OS中通用的全屏编辑器. vimm分为两种状态,即命令状态和编辑状态.在命令状态下.所键入的字符系统均作命令来处理.如:q代表退出,而编辑状态则是用 ...

  3. 《C程序猿从校园到职场》勘误

    (本人正在參加2015博客之星评选.诚邀你来投票,谢谢:username=zhouzxi">http://vote.blog.csdn.net/blogstar2015/candida ...

  4. 从0引入 ASP.NET Identity Core

    原文出自Rui Figueiredo的博客,原文链接<ASP.NET Identity Core From Scratch> 译者注:这篇博文发布时正值Asp.Net Core 1.1 时 ...

  5. Python笔记·第五章—— 列表(List) 的增删改查及其他方法

    一.列表的简介   列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[ ]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如:li = ...

  6. Java读取excel表格

    Java读取excel表格 一般都是用poi技术去读取excel表格的,但是这个技术又是什么呢 什么是Apache POI? Apache POI是一种流行的API,它允许程序员使用Java程序创建, ...

  7. 爬取豆瓣电影储存到数据库MONGDB中以及反反爬虫

    1.代码如下: doubanmoive.py # -*- coding: utf-8 -*- import scrapy from douban.items import DoubanItem cla ...

  8. Github开源项目(企业信息化基础平台)

    JEEPlatform 一款企业信息化开发基础平台,可以用于快速构建企业后台管理系统,集成了OA(办公自动化).SCM(供应链系统).ERP(企业资源管理系统).CMS(内容管理系统).CRM(客户关 ...

  9. NanUI 0.4.4发布

    NanUI是一个基于ChromiumFX开源项目的.Net Winform界面库,ChromiumFX是Chromium Embedded Framework的.Net实现.众所周知,Chromium ...

  10. XMPP协议的基本理解

    即时通讯技术简介 即时通讯技术(IM)支持用户在线实时交谈.如果要发送一条信息,用户需要打开一个小窗口,以便让用户及其朋友在其中输入信息并让交谈双方都看到交谈的内容.大多数常用的即时通讯发送程序都会提 ...