弹性布局-书本分布(案例实战)

本文通过一个具体的案例,详细讲解了如何使用CSS3的弹性布局来实现书本分布的效果。通过代码演示和运行结果展示,读者可以深入理解弹性布局的用法及其在实际项目中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述
代码:html代码

<body>
	<section class="main">
		<div class="course">
			<div class="course-read-book">
				<img src="img/book-1.jpg" alt="1">
			</div>
			<div class="course-read-container">
				<h4>给程序员的职场情商课</h4>
				<p><span class="main-course-font-style">风落几番 </span>蚂蚁金服测试专家r</p>
				<br>
				<p>
					<span class="main-course-price-style">¥ 19.90</span> <del class="main-course-deal-style-del">原价¥
						38.00</del> <span class="main-course-deal-style colo-style">限时优惠</span>
				</p>
			</div>
		</div>
		<div class="course">
			<div class="course-read-book">
				<img src="img/book-2.jpg" alt="2">
			</div>
			<div class="course-read-container">
				<h4>Web前端开发修炼指南</h4>
				<p class="author"><span class="main-course-font-style">sh22n
					</span>前携程高级前端工程师</p>
				<br>
				<p class="price">
					¥ 46.00<del>原价¥ 58.00</del> <span class="main-course-deal-style colo-style">限时优惠</span>
				</p>
			</div>
		</div>
		<div class="course">
			<div class="course-read-book">
				<img src="img/book-3.jpg" alt="1">
			</div>
			<div class="course-read-container">
				<h4>实战派 MySQL 高阶应用指南</h4>
				<p class="author"><span class="main-course-font-style">张勤一 </span>BAT 高级研发工程师</p>
				<br>
				<p class="price">
					¥ 46.00<del>原价¥ 58.00</del>
					<span class="main-course-deal-style colo-style">限时优惠</span>
				</p>
			</div>
		</div>
		<div class="course">
			<div class="course-read-book">
				<img src="img/book-4.jpg" alt="1">
			</div>
			<div class="course-read-container">
				<h4>解锁前端面试体系核心攻略</h4>
				<p class="author"><span class="main-course-font-style">修言
					</span>大型互联网公司业务线Owner</p>
				<br>
				<p class="price">
					¥ 58.00<del>原价¥ 78.00</del> <span class="main-course-deal-style colo-style">限时优惠</span>
				</p>
			</div>
		</div>
	</section>

</body>

CSS层叠样式代码

.main {
	width: auto;
	height: auto;
	margin-top: 3%;
	display: flex;
	/*设置弹性布局*/
	flex-direction: row;
	/* 设置主轴方向 */
	flex-wrap: wrap;
	/*
	*项目换行,第一行在最上方
	*/
	justify-content: center;
	/* 设置项目在主轴的对齐方式 */
}

.course {
	width: 600px;
	height: 300px;
	display: flex;
	align-items: center;
	overflow: hidden;
	float: left;
	margin: 5px;
	transition: all 0.3s;
}

img {
	width: 187px;
	height: 211px;
}

h4 {
	font-size: 24px;
}

del {
	color: #a5a5a5;
	margin: 0 3px 0 3px;
}

.course-read-book {
	margin-left: 1px;
	width: 240px;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.course-read-container {
	width: 360px;
	height: 200px;
	display: flex;
	flex-direction: column;
	/*
	*项目垂直排布
	*/
	justify-content: space-around;
}

.main-course-font-style {
	font-weight: 800;
	font-size: 18px;
	color: rgb(0, 0, 0);
}

.main-course-price-style {
	font-weight: 800;
	font-size: 18px;
	color: #3b81ff;
}

.main-course-deal-style {
	display: inline-flex;
	padding-left: 2px;
	width: 70px;
	height: auto;
	color: #ffffff;
}

.colo-style {
	/*设置渐变色*/
	background-image:
		/*to 指向*/
		linear-gradient(to right, #0778ea, #53d0f6);
}

代码运行结果

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小沐爱编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值