Question

div（页面换行）是页面容器，宽度为960px，其位置居中于页面中间。我想要一个忽略这个并具有页面宽度的子div。

.page-wrap {
  min-height: 100%;
  max-width: 960px;
  margin:0 auto;
  /* equal to footer height */
  margin-bottom: -50px;
}

我希望这个div忽略上面的

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 0;
}

HTML

<div class="page-wrap">
    <img src="logo.jpg" width="150px" height="75px">
    <hr/>
</div>

Answer 1

CSS中有3种类型的位置：

静态
相对
固定
绝对

在您的情况下，您希望使用除绝对之外的任何一个。尝试看看最适合您需求的东西。

read this

Answer 2

只有在没有position: absolute;的父元素的情况下才能使用position:relative，否则我无法实现此目标。

＆＃13;

.page-wrap {
  min-height: 100%;
  max-width: 360px;
  margin: 0 auto;
  /* equal to footer height */
  margin-bottom: -50px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 0;

  /*added*/
  position: absolute;
  left: 0;
  width: 100%;
}

＆＃13;

<div class="page-wrap">
  <img src="logo.jpg" width="150px" height="75px">
  <hr/>
</div>

＆＃13;

Answer 3

似乎hack-ish，但它可能会奏效。

已知％宽度方法。

https://jsfiddle.net/eulloa/5308kd5r/2/

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 0;
  /* addition */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

源。包括替代品。 https://css-tricks.com/full-width-containers-limited-width-parents/

如何忽略父母div中心的位置

3 个答案: