这是我的问题:
我有一个容器,有两个div(content&sidebar),在sidebar中有一个div,在div中有一个元素(这是一个wordpress小部件)。
我想把元素放在主容器外面,全宽的。
这是我想要的照片:
html - 设置2个级别的 parent 的全宽div?-LMLPHP
这是代码的一个示例:

.container{
  max-width:400px;
  border:1px solid blue;
  margin:0 auto;
  }
.content{
  background:grey;
  width:60%;
  float:left;
  margin-right:10%;
  }
.sidebar{
  background:grey;
  float:left;
  width:30%;
  }
.sidebard::after{
  content:"";
  display:block;
  clear:both;
  }
.element{
  border:1px solid green;
  }

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta leo non rutrum laoreet. Suspendisse finibus viverra lacinia. In at auctor libero, aliquam ornare risus.</p>
  </div>
  <div class="sidebar">
    <div>
      <div class="element">
        <p>This is my element</p>
      </div>
    </div>
  <div>
</div>
     

我试过用绝对位置,但效果不太好:/

最佳答案

您可以像这样使用position: absolute,与display: flex结合使用(因为您需要去掉浮动以便容器大小与内容)。
通过给container一个位置,在本例中relativeelementsabsolute将与之相关。

html, body {
  margin: 0;
}
.container{
  position: relative;
  max-width:400px;
  border:1px solid blue;
  margin:0 auto;
  display: flex;
}
.content{
  background:grey;
  width:60%;
  margin-right:10%;
}
.sidebar{
  background:grey;
  width:30%;
}
.element{
  border:1px solid green;
  position: absolute;
  width: calc(100vw - 2px);   /* for the border */
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
}

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta leo non rutrum laoreet. Suspendisse finibus viverra lacinia. In at auctor libero, aliquam ornare risus.</p>
  </div>
  <div class="sidebar">
    <div>
      <div class="element">
        <p>This is my element</p>
      </div>
    </div>
  <div>
</div>

你也可以使用浮动,尽管这不是今天推荐的布局方式。
通过对container应用clear float fix,它也可以工作,加上在我的第一个示例中使用的绝对定位,主要区别是elements父对象将崩溃。
.container{
  position: relative;
  max-width:400px;
  border:1px solid blue;
  margin:0 auto;
}
.content{
  background:grey;
  width:60%;
  float:left;
  margin-right:10%;
}
.sidebar{
  background:grey;
  float:left;
  width:30%;
}
.container::after{
  content:"";
  display:block;
  clear:both;
}
.element{
  border:1px solid green;
  position: absolute;
  width: calc(100vw - 2px);   /* for the border */
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
}

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta leo non rutrum laoreet. Suspendisse finibus viverra lacinia. In at auctor libero, aliquam ornare risus.</p>
  </div>
  <div class="sidebar">
    <div>
      <div class="element">
        <p>This is my element</p>
      </div>
    </div>
  <div>
</div>

更新
基于注释,这里有一个脚本解决方案,将元素移到container
window.addEventListener('load', function() {
  var element = document.querySelector('.element');
  var container = document.querySelector('.container')
  container.parentElement.insertBefore(element, container.nextSibling);
})

.container{
  max-width:400px;
  border:1px solid blue;
  margin:0 auto;
}
.content{
  background:grey;
  width:60%;
  float:left;
  margin-right:10%;
}
.sidebar{
  background:grey;
  float:left;
  width:30%;
}
.container::after{
  content:"";
  display:block;
  clear:both;
}
.element{
  border:1px solid green;
  margin-top: 10px;
}

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta leo non rutrum laoreet. Suspendisse finibus viverra lacinia. In at auctor libero, aliquam ornare risus.</p>
  </div>
  <div class="sidebar">
    <div>
      <div class="element">
        <p>This is my element</p>
      </div>
    </div>
  <div>
</div>

关于html - 设置2个级别的 parent 的全宽div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40436175/

10-09 05:45
查看更多