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

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:17 PM

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>

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>

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.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles