CSS 左右浮动元素的双向贴边

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

VIP文章 Ye_xiaoMing

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

阅读量642

点赞数

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

版权

<!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: 800px;
			height: 200px;
			background-color: #eee;
			border: 1px solid #000;
			margin-bottom: 50px;
		}
		div p {
			width: 100px;
			height: 100px;
			background-color: lightblue;
			/*浮动的同级元素有距离一样使用margin*/
			margin-right: 10px;
			/*使1、3、5、7盒子左浮动*/
			float: left;
		}
		div p.fr {
			/*使2、4、6盒子右浮动*/
			float: right;
		}
		/*当大盒子宽度不够时*/
		.box2 {
			width: 400px;
			height: 400px;
		}
	</style>
</head>
<body>
	<div class="box1">
		<p

最低0.47元/天解锁文章

Ye_xiaoMing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
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="Content-Type" content="text/.
复制链接

扫一扫