Question

我正在使用伪元素（之前）将border放在两列布局中的容器顶部。我希望border只在一个容器之上。

伪元素的width（设置为100％）不应该成为它内部容器的width吗？

#singleWrapper {
  margin: auto;
  max-width: 1100px;

}
.single #singleWrapper {
  margin: auto;
  max-width: 1100px;
  /*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
  position: relative;
  overflow: hidden;
}
#leftColumn .content-area {
  padding-right: 310px;
  width: 100%;
}
.articleWrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #009cff;
  background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
  height: 2px;
  width: 100%;
}
#leftColumn .content-area #main {
  background: #000;
  background: rgba(0, 0, 0, 0.30);
  padding-left: 20px;
  padding-right: 20px;
}
#singleWrapper .contentHolder {
  margin-right: -310px;
  width: 100%;
  float: left;
  position: relative;
}
#rightColumn {
  float: right;
  position: relative;
  display: block;
  width: 290px;
}
#leftColumn,
#rightColumn {
  display: inline-block;
  vertical-align: top;
  margin-top: 1.1em;
}

<div id="singleWrapper">
  <div id="leftColumn" class="contentHolder">
    <div id="primary" class="content-area">
      <main id="main" class="site-main" role="main">
        <div class="articleWrapper">
          <h1>Title</h1>
          <div class="articleBody">
            Article Body
          </div>
        </div>
      </main>
    </div>
  </div>
  <div id="rightColumn">
    Side Bar Area
  </div>
</div>

Answer 1

问题是你正在使用position:absolute

来自MDN

绝对定位

相对定位的元素仍然被认为是在   文档中元素的正常流动。相反，一个元素   绝对定位的是从流程中取出并因此占用   放置其他元素时没有空间。绝对定位   元素相对于最近定位的祖先定位。如果一个   定位祖先不存在，使用初始容器

修复方法是将其添加到CSS中：

.articleWrapper {
  position:relative;
}

并将top:0;中的.articleWrapper:before更改为您最喜欢的任何负值。

这是一个片段

#singleWrapper {
  margin: auto;
  max-width: 1100px;
}
.single #singleWrapper {
  margin: auto;
  max-width: 1100px;
  /*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
  position: relative;
  overflow: hidden;
}
#leftColumn .content-area {
  padding-right: 310px;
  width: 100%;
}
.articleWrapper {
  position:relative;
}
.articleWrapper:before {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  background: #009cff;
  background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
  height: 2px;
  width: 100%;
}
#leftColumn .content-area #main {
  background: #000;
  background: rgba(0, 0, 0, 0.30);
  padding-left: 20px;
  padding-right: 20px;
}
#singleWrapper .contentHolder {
  margin-right: -310px;
  width: 100%;
  float: left;
  position: relative;
}
#rightColumn {
  float: right;
  position: relative;
  display: block;
  width: 290px;
}
#leftColumn,
#rightColumn {
  display: inline-block;
  vertical-align: top;
  margin-top: 1.1em;
}

<div id="singleWrapper">
  <div id="leftColumn" class="contentHolder">
    <div id="primary" class="content-area">
      <main id="main" class="site-main" role="main">
        <div class="articleWrapper">
          <h1>Title</h1>
          <div class="articleBody">
            Article Body
          </div>
        </div>
      </main>
    </div>
  </div>
  <div id="rightColumn">
    Side Bar Area
  </div>
</div>

伪元素100％宽度不占用容器大小

1 个答案: