CSS 浮动贴边显示实现盒子倒序

最新推荐文章于 2023-04-16 20:50:59 发布

Ye_xiaoMing

最新推荐文章于 2023-04-16 20:50:59 发布

阅读量322

点赞数

本文链接：https://blog.csdn.net/Leaf_xiaoMing/article/details/119546465

版权

利用浮动的贴边显示功能，设置盒子右浮动来实现盒子倒序

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* 浮动贴边显示
		  元素依次贴边显示
		*/
		div {
			width: 500px;
			height: 200px;
			border: 1px solid #000;
			background-color: #eee;
			margin-bottom: 50px;
		}
		span {
			width: 100px;
			height: 100px;
		}
		div span.no1 {
			background-color: green;
		}
		div span.no2 {
			background-color: yellow;
		}
		div span.no3 {
			background-color: pink;
		}
		div span.no4 {
			background-color: lightblue;
		}
		/*左浮动*/
		.box1 span {
			float: left;
		}
		/*右浮动*/
		.box2 span {
			float: right;
		}
	</style>
</head>
<body>
	<div class="box1">
		<span class="no1">1</span>
		<span class="no2">2</span>
		<span class="no3">3</span>
		<span class="no4">4</span>
	</div>
	<div class="box2">
		<span class="no1">1</span>
		<span class="no2">2</span>
		<span class="no3">3</span>
		<span class="no4">4</span>
	</div>
</body>
</html>

运行效果：

Ye_xiaoMing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 浮动贴边显示实现盒子倒序

利用浮动的贴边显示功能，设置盒子右浮动来实现盒子倒序<!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" xml:lang="en"><head> <meta http-equiv=.
复制链接

扫一扫