使用 DIV 作为边框：响应式布局实现

技术教程
2025-10-13 09:58:08

使用 div 作为边框：响应式布局实现

本文旨在解决如何使用一个 DIV 元素作为另一个 DIV 元素的边框，并实现响应式布局，避免使用固定像素值带来的适配问题。通过修改 CSS 中的 `margin-top` 属性，将其从固定像素值改为百分比，可以实现目标元素相对于其他按百分比缩放的元素进行自适应定位，从而达到响应式效果。

问题分析

原始代码尝试使用一个 div 作为另一个 div 的边框，并通过负 margin 值来调整两个 div 之间的位置关系。然而，使用固定像素值的负 margin 在不同屏幕尺寸下会产生错位，无法实现响应式布局。问题的核心在于如何使 #gallery1 元素始终位于 .hovertrigger 元素的下方，并保持一定的间距，且这个间距能够随着屏幕尺寸的变化而自适应调整。

解决方案

将 #gallery1 元素的 margin-top 属性从固定像素值改为百分比。由于其他 div 元素已经使用了百分比进行缩放，因此使用百分比的 margin-top 可以使 #gallery1 元素相对于这些元素进行自适应定位。

代码示例

将以下 CSS 代码：

#gallery1 {
  margin-top: -590px;
}

替换为：

YIXUNCMS中秋专版2.0.4

系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应

0 查看详情 YIXUNCMS中秋专版2.0.4

#gallery1 {
  margin-top: -38%;
}

原理解释

通过将 margin-top 设置为 -38%，#gallery1 元素将向上移动其父元素高度的 38%。由于 .hovertrigger 等元素的高度是基于百分比计算的，因此 #gallery1 的位置也会随着屏幕尺寸的变化而相应调整，从而实现响应式布局。调整百分比值可以控制 #gallery1 与 .hovertrigger 之间的间距。

完整示例代码

以下是包含修改后的 CSS 的完整示例代码：

<div class="container">
  <div class="hovertrigger" id="hovertrigger1"></div>
  <div class="logoanim" id="logoanim1">@@##@@</div>
  <div class="logo" id="logo1&quot;>@@##@@</div>
</div>
<div class="wp-block-gmedia-gallery gmedia-shortcode" id="gallery1">[gmedia id=13]</div>

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  blend-mode: lighten;
  z-index: 100;
  pointer-events: none;
  position: relative;
  mix-blend-mode: lighten;
}

.logo {
  grid-area: 1 / 1 / 6 / 5;
  text-align: center;
  z-index: 400;
  opacity: 1;
  pointer-events: none;
  height: 100%;
  width: 100%;
}

.hovertrigger {
  z-index: 1000;
  grid-area: 1 / 1 / 4 / 5;
  width: 100%;
  height: 50%;
  pointer-events: auto;
  background: none;
}

.logoanim {
  grid-area: 1 / 1 / 6 / 5;
  text-align: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  height: 100%;
  width: 100%;
}

#gallery1 {
  margin-top: -38%;
}

#hovertrigger1:hover~.logoanim {
  opacity: 1;
}

#hovertrigger1:hover~div.logo {
  opacity: 0
}

.wp-image-536 {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.wp-image-587 {
  height: 100%;
  width: 100%;
  object-fit: cover;
}