HTML+CSS完成三个盒子并列排布

最新推荐文章于 2024-04-14 08:00:00 发布

無事咕咕

最新推荐文章于 2024-04-14 08:00:00 发布

阅读量3.7w

点赞数 40

分类专栏：日志文章标签： HTML CSS 新手学习日志

本文链接：https://blog.csdn.net/qq_45038715/article/details/98182104

版权

日志专栏收录该内容

12 篇文章 1 订阅

订阅专栏

使用HTML+CSS完成如下：

在这里插入图片描述这个页面主要是设置一个大的盒子，放置三个小盒子，调整三个小盒子和大盒子的距离高度，往小盒子添加内容即可。
那么，大盒子上如何放置三个这样的盒子呢？
首先，我们定义ul li 定义出大盒子和三个小盒子，给他们添加合适的高度宽度，在li 的三个小盒子里添加 float: left使其浮动，再给他们添加margin-right，这样他们之间就有个间隔啦。

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三个盒子</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}


		ul{
			background: #ededed;
			height: 300px;
			width: 640px;
			margin: 0 auto;
		}
		ul li{
			
			background: #fff;
			box-sizing: border-box;
			border: 1px solid #333;
			height: 300px;
			width: 200px;
			float: left;
			margin-right: 20px;
		}
		ul li:last-child{
			margin-right: 0px;
		}
		ul li p{
			text-align: center;

		}
		ul li span{
			display: block;
			font-size: 14px;
			text-align: center;
			color: #e08c35;
			font-weight: bold;
		}
	</style>
</head>
<body>
	
	<ul>
		<li>
			<img src="./imge/饼干.jpg" alt="" width="200" height="200">
			<p>薯味博饼280g</p><br>
            <span>超值价￥9.9</span>
		</li>
		<li>
			<img src="./imge/衣架.png" alt="" width="200" height="200">
			<p>铝制洗涤用衣架</p><br>
            <span>超值价￥9.9</span>
		</li>
		<li>
			<img src="./imge/拖鞋.png" alt="" width="200" height="200">
			<p>男/女轻弹云朵家居鞋</p><br>
            <span>超值价￥9.9</span>
		</li>
	</ul>
	
</body>
</html>

無事咕咕

关注

40
点赞
踩
243

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS完成三个盒子并列排布

使用HTML+CSS完成如下：这个页面主要是设置一个大的盒子，放置三个小盒子，调整三个小盒子和大盒子的距离高度，往小盒子添加内容即可。那么，大盒子上如何放置三个这样的盒子呢？首先，我们定义ul li 定义出大盒子和三个小盒子，给他们添加合适的高度宽度，在li 的三个小盒子里添加 float: left使其浮动，再给他们添加margin-right，这样他们之间就有个间隔啦。代码<!...
复制链接

扫一扫