【笔记】学习CSS布局15——inline-box

最新推荐文章于 2023-02-08 10:53:47 发布

二木成林

最新推荐文章于 2023-02-08 10:53:47 发布

阅读量1.3k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/cnds123321/article/details/84626140

版权

笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子：

困难的方式（使用浮动）

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.box {
			float:left;
			width:200px;
			height:100px;
			margin:1em;
			background-color:#6ac5ac;
		}
		.after_box {
			clear:left;
			background-color:#d64078;
		}
	</style>
</head>
<body>
	<div class="box">
		我在浮动！
	</div>
	<div class="box">
		我在浮动！
	</div>
	<div class="box">
		我在浮动！
	</div>
	<div class="box">
		我在浮动！
	</div>
	<div class="box">
		我在浮动！
	</div>
	<div class="box">
		我在浮动！
	</div>
	<div class="box">
		我在浮动！
	</div>
	<div class="box">
		我在浮动！
	</div>
	<div class="box">
		我在浮动！
	</div>
	<div class="box">
		我在浮动！
	</div>
	<div class="box">
		我在浮动！
	</div>
	<div class="after_box">
		我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。
	</div>
</body>
</html>

效果图如下：

容易的方式（使用 inline-block）

你可以用 display 属性的值 inline-block 来实现相同效果。

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.box {
			display: inline-block;
			width:200px;
			height:100px;
			margin:1em;
			background-color:#6ac5ac;
		}
		.after_box {
			clear:left;
			background-color:#d64078;
		}
	</style>
</head>
<body>
	<div class="box">
		我是一个行内块！
	</div>
	<div class="box">
		我是一个行内块！
	</div>
	<div class="box">
		我是一个行内块！
	</div>
	<div class="box">
		我是一个行内块！
	</div>
	<div class="box">
		我是一个行内块！
	</div>
	<div class="box">
		我是一个行内块！
	</div>
	<div class="box">
		我是一个行内块！
	</div>
	<div class="box">
		我是一个行内块！
	</div>
	<div class="box">
		我是一个行内块！
	</div>
	<div class="box">
		我是一个行内块！
	</div>
	<div class="box">
		我是一个行内块！
	</div>
	<div class="after_box">
		这次我可没有用 clear 。太棒了！
	</div>
</body>
</html>

效果图如下：