如何使多个dl没有间隙？_html/css_WEB-ITnose-html教程-PHP中文网

回复讨论(解决方案)

首页

web前端

html教程

如何使多个dl没有间隙？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:17 PM

本帖最后由 dmtnewtons 于 2012-12-17 14:18:31 编辑

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>dl_float</title><style type="text/css">*{	padding:0;	margin:0;	}div{	border:solid 1px;	padding:10px;	float:left;	width:900px;	margin-top:10px;	margin-left:auto;	margin-right:auto;	position:relative;	}div dl{	display:block;	width:400px;	border:solid 1px;	float:left;	margin:2px;	position:inherit;	}</style></head><body><div>	<dl>def<br />ghi</dl>	<dl>456</dl>	<dl>123<br />abc</dl>	<dl>789</dl></div></body></html>

登录后复制

效果:

我想要的效果：

因为dl由程序循环出来的所以不能针对具体个体修改，怎么实现后面的dl将前面的dl空隙补齐？

回复讨论(解决方案)

margin:2px; 你都定义了这个东西当然会有了设为0就没有了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>dl_float</title><style type="text/css">*{    padding:0;    margin:0;    }div{    border:solid 1px;    padding:10px;    float:left;    width:900px;    margin-top:10px;    margin-left:auto;    margin-right:auto;    position:relative;    }dl{    display:block;    width:400px;    border:solid 1px;    float:left;    margin:2px;    position:inherit;    }</style></head> <body><div>    <dl>def<br />ghi</dl>    <dl>456</dl>    <dl>123<br />abc</dl>    <dl style="bottom:25px;">789</dl></div></body></html>

登录后复制

用了最笨的方法，加了个内联样式

感觉你要的这种真不好实现，你可以竖着排，定义个个数，把float去掉，到个数了往第二列排
或者给dl定义个高度，那样对着齐

这种布局float搞不定的，高度不一致，可以使用jquery插件以瀑布流masonry来布局

瀑布流masonry布局API

这种布局float搞不定的，高度不一致，可以使用jquery插件以瀑布流masonry来布局

瀑布流masonry布局API 好啊！

正如版主所说，用jq瀑布流插件去实现，类似于花瓣网那样的效果

#1、#2 请仔细看我的问题：
1、margin都设为零，我早试过了，而且就算之间有2px的间隙，但如果dl会填充间隙的话，它还是会挤上去的，而实际上，却没有挤上去。
2、这些dl是要通过脚本循环出来的，如果可以针对单个元素操作，我就不会提问了。

现在只能寄希望与#4的瀑布流布局 masonry 了，希望不会和 BlocksIt 一样会出现样式无法控制兼容的问题！！！

4楼正解！
楼主一直有个误区：你的dl实际是3行，你却硬要把第三行挤进第二行前面去？这和间距无关，是行数错了！

楼上可以试试把原来代码中的div中的dl换下顺序，再看看，你就会发现后面的dl会挤到右上边的。

针对原来的问题，还是用的#7的方法，只不过要用js对可能出现的样式问题控制下。就这样了。

本站声明

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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7705

Java教程

1640

CakePHP 教程

1394

Laravel 教程

1288

PHP教程

1231

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。