移动设备上内容周围的边框未对齐

Question

我使用下面的代码在内容背景周围创建一个边框，它在桌面上看起来不错，但随着屏幕变小，框架正在失去其位置并覆盖内容。寻找一种方法来使该框架粘附在背景颜色上并具有响应能力。这是jsfiddle

    <div style="position:relative;">
      <div class="bg">
       <div>
        <h2>Title</h2>
       </div>
       <div>
        <a href="#">View More</a>
       </div>
      </div>
    </div>
    body {
    background: #000;
    }
    .bg {
    background: #f90000;
    padding: 55px 20px;
    width: 50%;
    margin: 40px auto;
    }
    .bg h2 {
    color: white;
    text-align: center;
    }
    .bg a {
    text-align: center;
    display: block;
    color: white;
    font-size: 20px;
    }
    .bg:after {
    content: '';
    position: absolute;
    top: -15px;
    left: 170px;
    right: 170px;
    bottom: -15px;
    border: #fff 1px solid;
    }

Answer 1

您的

边框(位于after伪元素中(位于绝对值中，但其父级是静态的(默认值position值(。绝对定位的元素始终相对于第一个非静态父元素。

将.bg位置设置为相对位置，并更改:after的左右属性，以便边框始终相对于其父项。

body {
  background: #000;
}
.bg {
  background: #f90000;
  padding: 55px 20px;
  width: 50%;
  margin: 40px auto;
  position : relative;
}
.bg h2 {
  color: white;
  text-align: center;
}
.bg a {
  text-align: center;
  display: block;
  color: white;
  font-size: 20px;
}
.bg:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  border: #fff 1px solid;
}

<div style="position:relative;">
  <div class="bg">
    <div>
      <h2>Title</h2>
    </div>
    <div>
      <a href="#">View More</a>
    </div>
  </div>
</div>

Answer 2

您必须

将position:relative设置为.bg类，并设置min-width以便框架应该坚持较小的屏幕

更新的小提琴

Answer 3

使宽度、字体大小和填充相对于宽度。

请参阅： https://www.w3schools.com/cssref/css_units.asp

使用单位vw

Answer 4

你的代码的问题在于你在left和right属性上有固定的值。这意味着当窗口调整大小时，背景宽度会随着边框与窗口边框的相对位置而变化。

因此，要解决此问题，请使用新的 CSS3 calc() 函数，如下所示：

body {
  background: #000;
}
.bg {
  background: #f90000;
  padding: 55px 20px;
  width: 50%;
  margin: 40px auto;
}
.bg h2 {
  color: white;
  text-align: center;
}
.bg a {
  text-align: center;
  display: block;
  color: white;
  font-size: 20px;
}
.bg:after {
  content: '';
  position: absolute;
  top: -15px;
  left: calc(25% - 20px); /* Because you padding is 20px */
  right: calc(25% - 20px);
  bottom: -15px;
  border: #fff 1px solid;
}

<div style="position:relative;">
  <div class="bg">
    <div>
      <h2>Title</h2>
    </div>
    <div>
      <a href="#">View More</a>
    </div>
  </div>
</div>