CSS 图文左右布局

最新推荐文章于 2024-09-12 15:53:16 发布

xiangxiongfly915

最新推荐文章于 2024-09-12 15:53:16 发布

阅读量1.5k

点赞数

分类专栏： # CSS & Less & Sass 文章标签： css 前端 javascript float flex

本文链接：https://blog.csdn.net/qq_14876133/article/details/128734404

版权

CSS & Less & Sass 专栏收录该内容

42 篇文章 5 订阅

订阅专栏

CSS 图文左右布局

方式一：使用float。
方式二：使用flex。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>float、flex实现图文左右布局</title>
		<style type="text/css">
			dl,
			dt,
			dd,
			flex {
				margin: 0;
				padding: 0;
			}

			.title {
				line-height: 50px;
				font-size: 30px;
				font-weight: bold;
				text-align: center;
				background: #eee;
			}

			.part1,
			.part2 {
				width: 350px;
				margin-top: 10px;
				border: 1px solid silver;
				overflow: hidden;
			}

			.item {
				margin-top: 20px;
				padding-left: 20px;
				padding-bottom: 20px;
			}

			.item img {
				margin-right: 20px;
			}

			.part1 .item img {
				float: left;
				margin-bottom: 20px;
			}

			.part2 .item {
				display: flex;
			}
		</style>
	</head>
	<body>
		<div class="part1">
			<div class="title">float左右布局</div>
			<div class="item">
				<img width="150" src="../img/0.jpg" alt="">
				<dl>
					<dt>hello world</dt>
					<dd>这是一些内容</dd>
				</dl>
			</div>
		</div>
		<div class="part2">
			<div class="title">flex左右布局</div>
			<div class="item">
				<img width="150" src="../img/0.jpg" alt="">
				<dl>
					<dt>hello world</dt>
					<dd>这是一些内容</dd>
				</dl>
			</div>
		</div>
	</body>
</html>