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

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

<强> Updated Fiddle

Answer 2

您的边界（位于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 3

相对宽度设置宽度，字体大小和填充。

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

使用单位vw

Answer 4

您的代码存在的问题是您在left和right上有固定值。这意味着当窗口调整大小时，backgronud的宽度会随着边框与窗口边框的相对位置而改变。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

移动设备上未覆盖内容的边框

4 个答案: