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

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

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

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

使用单位vw

Answer 2

您必须将 position:relative 设置为 .bg class 并设置 min-width 以便框架应该适用于较小的屏幕

Updated Fiddle

Answer 3

你的边框（在 after 伪元素中）是绝对定位的，但它的父元素是静态的（默认 position 值）。绝对定位元素总是相对于第一个 none-static 父元素。

将 .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 4

您的代码存在的问题是您在 left 和 right 属性上设置了固定值。这意味着当 window 调整大小时，背景的宽度会随着边框相对于 window 边框的相对位置而变化。

因此，要解决问题，请使用新的 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>

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

Border around content misaligned on mobile

html

css

mobile

jquery

border