如何使多个dl没有间隙？

༺ཌༀཉི浮华背后༃ༀད༻ 2012-12-17 02:17:21



<!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空隙补齐？

...全文

343 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

༺ཌༀཉི浮华背后༃ༀད༻ 2012-12-25

打赏
举报

楼上可以试试把原来代码中的div中的dl换下顺序，再看看，你就会发现后面的dl会挤到右上边的。针对原来的问题，还是用的#7的方法，只不过要用js对可能出现的样式问题控制下。就这样了。

cde32 2012-12-25

打赏
举报

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

零七九三 2012-12-20

打赏
举报

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

༺ཌༀཉི浮华背后༃ༀད༻ 2012-12-20

打赏
举报

#1、#2 请仔细看我的问题： 1、margin都设为零，我早试过了，而且就算之间有2px的间隙，但如果dl会填充间隙的话，它还是会挤上去的，而实际上，却没有挤上去。 2、这些dl是要通过脚本循环出来的，如果可以针对单个元素操作，我就不会提问了。现在只能寄希望与#4的瀑布流布局 masonry 了，希望不会和 BlocksIt 一样会出现样式无法控制兼容的问题！！！

༺ཌༀཉི浮华背后༃ༀད༻ 2012-12-20

打赏
举报

参考：瀑布流布局实现代码：


<!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>
<script language="javascript" type="text/javascript" src="../js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/blocksit.js"></script>
<style type="text/css">
*{
	padding:0;
	margin:0;
	}
div{
	border:solid 1px;
	padding:10px;
	width:900px;
	}
	
div dl{
	width:400px;
	border:solid 1px;
	float:left;
	margin-top:10px;
	margin-left:10px;
	}
	
</style>
<script language="javascript" type="text/javascript">

$(function(){
	$("div").BlocksIt({
		numOfCol: 2,
		offsetX: 3,
		offsetY: 2,
		blockElement: 'dl'
	});
});

</script>
</head>

<body>
<div>
	<dl>def<br />ghi</dl>
	<dl>456</dl>
	<dl>123<br />abc</dl>
	<dl>789</dl>
</div>
</body>
</html>

但是，我加到实际应用中后，整个div脱离了原来的body体，直接顶到页面顶部了，而且还带来了一系列的浏览器兼容问题……脚本控制样式还是麻烦不少啊……

net_php 2012-12-18

打赏
举报

引用 4 楼 showbo 的回复:

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

好啊！

Go 旅城通票 2012-12-18

打赏
举报

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

瀑布流masonry布局API

小疯疯008 2012-12-18

打赏
举报

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

努力的小铺 2012-12-17

打赏
举报

<!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>

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