DL.DT.DD实现左右的布局简单例子

PHP中文网

发布时间：2016-05-16 12:06:39

2812人浏览过

来源于php中文网

原创

这是今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方：
1、如果用UL还布局，右边一栏比较麻烦；
2、文字外边的边框自适应比较麻烦；
3、很可能要定死高度；
所以，细细地看一看这个布局，想一想还是用DL.DT.DD作是合理的：
1、布局合理一些；
2、将来扩展很方便；
3、CSS一定很少；
试着写了写，看一看还行！在可控范围内！
布局布分当然不用说了：

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

css部分：

看一下效果：

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

如果说定宽？

jQuery全屏广告图片拖拽预览特效

jQuery全屏广告图片拖拽预览特效是一款基于jQuery+CSS3实现的广告公司图片案例展示，全屏广告图片列表，图文列表左右拖拽预览ui布局特效。

下载

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

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

 
 
 
 
 
 
 
 
 
   
       
    母亲节-祝福短信 
   
   
       
    母亲节-祝福短信 
   
   
       
    母亲节-祝福短信 
   
   
       
    母亲节-祝福短信 
   
   
       
    母亲节-祝福短信

css盒模型溢出处理_使用overflow属性管理溢出内容

css grid和position能否一起使用_通过布局独立性进行分析

css 浮动元素之间出现间隙怎么办_检查空白节点并调整浮动结构

css布局内外边距如何统一_通过 margin/padding 工具类或全局变量

css浮动导致重叠问题_css浮动错位解决方案

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：用iframe margin实现调用其他网页的某一区域的方法_经验交流下一篇：Div CSS absolute与relative的区别小结_经验交流

作者最新文章

小米笔记本重装系统的方法

2024-07-12 05:54

Thinkpad如何重装系统

2024-07-12 05:55

Nvidia控制面板显示设置不可用怎么办

2024-07-15 13:06

美颜相机怎么做海报

2024-07-15 13:06

美颜相机怎么贴纸遮脸脸

2024-07-15 13:09

美颜相机扣款怎么关掉

2024-07-15 13:10

如何开通拼多多

2024-07-15 13:10

拼多多开店如何选品类

2024-07-15 13:12

拼多多是如何成立的

2024-07-15 13:13

是大事

2024-12-27 16:41

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

github中文官网入口 github中文版官网网页进入

github中文官网入口https://docs.github.com/zh/get-started，GitHub 是一种基于云的平台，可在其中存储、共享并与他人一起编写代码。通过将代码存储在GitHub 上的“存储库”中，你可以： “展示或共享”你的工作。持续“跟踪和管理”对代码的更改。

2026.01.21

windows安全中心怎么关闭打开_windows安全中心操作指南

Windows安全中心可以通过系统设置轻松开关。暂时关闭：打开“设置” -> “隐私和安全性” -> “Windows安全中心” -> “病毒和威胁防护” -> “管理设置”，将“实时保护”关闭。打开：同样路径将开关开启即可。如需彻底关闭，需在组策略(gpedit.msc)或注册表中禁用Windows Defender。

2026.01.21

C++游戏开发Unreal Engine_C++怎么用Unreal Engine开发游戏

虚幻引擎（Unreal Engine, 简称UE）是由Epic Games开发的一款功能强大的工业级3D游戏引擎，以高品质实时渲染（如Nanite和Lumen）闻名。它基于C++语言，为开发者提供高效率的框架、强大的可视化脚本系统（蓝图）、以及针对PC、主机和移动端的完整开发工具，广泛用于游戏、电影制片等领域。

2026.01.21

Python GraphQL API 开发实战

本专题系统讲解 Python 在 GraphQL API 开发中的实际应用，涵盖 GraphQL 基础概念、Schema 设计、Query 与 Mutation 实现、权限控制、分页与性能优化，以及与现有 REST 服务和数据库的整合方式。通过完整示例，帮助学习者掌握使用 Python 构建高扩展性、前后端协作友好的 GraphQL 接口服务，适用于中大型应用与复杂数据查询场景。

2026.01.21

云朵浏览器入口合集

本专题整合了云朵浏览器入口合集，阅读专题下面的文章了解更多详细地址。

2026.01.20

Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机（JVM）的核心工作原理与性能调优方法，包括 JVM 内存结构、对象创建与回收流程、垃圾回收器（Serial、CMS、G1、ZGC）对比分析、常见内存泄漏与性能瓶颈排查，以及 JVM 参数调优与监控工具（jstat、jmap、jvisualvm）的实战使用。通过真实案例，帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

2026.01.20