css+html中div和img对齐

最新推荐文章于 2024-08-25 12:01:28 发布

原创最新推荐文章于 2024-08-25 12:01:28 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

JS CSS HTML 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用CSS的position属性实现图片与元素精准对齐的方法。通过将外层div设置为relative，内部元素设置为absolute，可以精确控制元素的位置。示例中，一张图片和一个红色矩形块被放置在外层div中，通过调整left属性，实现了右侧元素的精确定位。

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

外层的div用position: relative; 里面两个都用position: absolute;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片对齐</title>
<style>
.cutoms-left{
	display:inline-block;
	position: absolute;
}


.cutoms-right{
	display:inline-block;
	position: absolute;
	background-color:#F00;
	width:200px;
	height:400px;
	left:700px;
}
</style>

</head>

<body>
	<p>外层的div用position: relative; 里面两个都用position: absolute;</p>
	<div style="position: relative;">
    	<img class="cutoms-left" alt="图片1"  src="../image/zzpic24786.jpg" />
        <div class="cutoms-right"></div>
    </div>
</body>
</html>

在这里插入图片描述