Rumah >hujung hadapan web >html tutorial >如何使多个dl没有间隙?_html/css_WEB-ITnose
<!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>
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对可能出现的样式问题控制下。就这样了。