利用浮动让多个盒子在同一行显示

最新推荐文章于 2024-05-21 21:13:29 发布

小团子*-*

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量3.4k

点赞数 3

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/qq18__/article/details/106188675

版权

前端学习专栏收录该内容

6 篇文章 1 订阅

订阅专栏

预期效果如图所示：
在这里插入图片描述首先用html定义所需的几个盒子结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<link rel="stylesheet" type="text/css" href="css/float.css"/>
	</head>
	<body>
		<div class="box">
			<div class="left"></div>
			<ul class="right">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
			</ul>
		</div>
	</body>
</html>

用css实现盒子的样式

* {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
.box {
	width: 1226px;
	height: 615px;
	margin: auto;
	background-color: gray;
}
.left {
	float: left;
	width: 234px;
	height: 615px;
	background-color: palegreen;
}
.right {
	float: right;
	width: 992px;
	height: 615px;
	background-color: paleturquoise;
}
.right li {
	width: 234px;
	height: 300px;
	background-color: palegoldenrod;
	float: left;
	margin-left: 14px;
	margin-bottom: 14px;
}

小团子*-*

关注

3
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
利用浮动让多个盒子在同一行显示

预期效果如图所示：首先用html定义所需的几个盒子结构<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>浮动</title> <link rel="stylesheet" type="text/css" href="css/float.css"/> </head> <body> <div class=
复制链接

扫一扫