关于float和inline-block实现不规则瀑布布局的探索

最新推荐文章于 2022-06-20 09:49:49 发布

原创最新推荐文章于 2022-06-20 09:49:49 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文通过示例介绍了如何使用CSS实现特定的布局效果，包括利用display属性的inline-block值进行元素定位，以及解决由此带来的额外间距问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>无标题 1</title>
<style>
div{
	vertical-align:top;		/*定义元素在行内的上下位置，比如sub*/
	display:inline-block;   
	margin:0;				/*值为0，依然有外边距5px*/ 
	
	background:black;
	width:200px;
	height:200px;
}
</style>
</head>
<body style="width:616px;color:white">

<div>1</div>
<div style="height:400px;">2</div>
<div>3</div>

<!---无论是float还是inline-block，第4块将对其最长的第二块排列。因此不规则的瀑布式布局应该分好了三列，然后依次往三列中追加div。--->
<div>4</div>
<div>5</div>

</body>
</html>