How to make multiple dl without gaps? _html/css_WEB-ITnose-HTML Tutorial-php.cn

How to make multiple dl without gaps? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:17:48

Original

1230 people have browsed it

This post was last edited by dmtnewtons on 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>

Copy after login

Effect:

What I want Effect:

Because dl is looped out by the program, it cannot be modified for specific individuals. How can the subsequent dl fill the gaps in the previous dl?

Reply to the discussion (solution)

margin:2px; You have defined this thing, of course it will be there, set it to 0 and it will disappear

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

Copy after login

I used the stupidest method and added an inline style

I feel that what you want is really difficult to achieve. You can arrange it vertically and define the number. Remove the float, and when the number is reached, arrange it in the second column
or define a height for dl, so that it is aligned

This layout cannot be handled with float, and the height is inconsistent. You can use the jquery plug-in to create a waterfall Layout with flow masonry

Waterfall masonry layout API

This kind of layout cannot be handled by float and is highly inconsistent. You can use jquery plug-in to layout with waterfall masonry

Waterfall flow masonry layout API OK!

As the moderator said, use the jq waterfall plug-in to achieve an effect similar to that of Petal Net

#1, #2 Please read my questions carefully:
1. The margins are all set to zero. I have tried it before, and even if there is a gap of 2px, if dl fills the gap, it will still squeeze in, but in fact, it does not squeeze in.
2. These DLs are to be looped out through scripts. If it can be operated on a single element, I will not ask questions.

Now I can only hope to be masonry with the waterfall flow layout in #4. I hope that there will not be the same problem of style control and compatibility as BlocksIt! ! !

The correct answer to the 4th floor!
The poster has always had a misunderstanding: your dl actually has 3 lines, but you insist on squeezing the third line in front of the second line? This has nothing to do with spacing, it’s the wrong number of lines!

Upstairs, you can try changing the order of the dl in the div in the original code. If you look again, you will find that the later dl will be squeezed to the upper right.

For the original problem, we still use the #7 method, but use js to control possible style issues. That's it.