照片墙——浮动定位

最新推荐文章于 2024-09-26 20:04:08 发布

Flora_M

最新推荐文章于 2024-09-26 20:04:08 发布

阅读量1.1k

点赞数 4

分类专栏：前端

本文链接：https://blog.csdn.net/Flora_SM/article/details/96309271

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			body {
				background-color: rgb(0, 102, 102);
			}

			img {
				width: 200px;
				height: 200px;
			}

			ul {
				border: 2px solid red;
				width: 726px;
				list-style-type: none;
				margin: 20px auto;
			}

			li {
				float: left;
				border: 1px solid red;
				padding: 10px;
				margin: 10px;
				background-color: rgb(204, 204, 204);
			}

			#clearFloat {
				clear: both;
			}

			p{
				text-align: center;
				}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<img src="01.jpg">
				<p>java编程思想</p>
			</li>
			<li>
				<img src="02.jpg">
				<p>java编程思想</p>
			</li>
			<li>
				<img src="03.jpg">
				<p>java编程思想</p>
			</li>
			<li>
				<img src="04.jpg">
				<p>java编程思想</p>
			</li>
			<li>
				<img src="05.jpg">
				<p>java编程思想</p>
			</li>
			<li>
				<img src="06.jpg">
				<p>java编程思想</p>
			</li>
			<div id="clearFloat">

			</div>

		</ul>
	</body>
</html>

解析：clear：消除浮动对自己的影响，当前元素会移动到浮动元素的下方。所以采用一个空div间接填补了ul的高度。

效果图：