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

最新推荐文章于 2022-08-13 14:46:32 发布

Hobootu

最新推荐文章于 2022-08-13 14:46:32 发布

阅读量1.1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/debugingstudy/article/details/11922967

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hobootu

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于float和inline-block实现不规则瀑布布局的探索

无标题 1div{ vertical-align:top; /*定义元素在行内的上下位置，比如sub*/ display:inline-block; margin:0; /*值为0，依然有外边距5px*/ background:black; width:200px; height:200px;}123无论是float还是inline-bloc
复制链接

扫一扫