预览如图，手机端为自适应两行展示 使用方式：代码粘贴至合适的位置即可！
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>横板自适应双广告图片</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #333;
}
.ad-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.ad {
position: relative;
width: calc(50% - 10px);
min-width: 300px;
overflow: hidden;
}
.ad img {
width: 100%;
height: auto;
display: block;
}
.ad-label {
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 5px 10px;
border-radius: 3px;
font-size: 12px;
}
@media (max-width: 768px) {
.ad {
width: 100%;
}
}
</style>
</head>
<body>
<div class="ad-container">
<div class="ad">
<img src="gg.png" alt="广告1">
<div class="ad-label">广告</div>
</div>
<div class="ad">
<img src="gg.png" alt="广告2">
<div class="ad-label">广告</div>
</div>
</div>本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系客服以便删除!
发表评论