设置具有 2 级父母的全宽 div？

Question

这是我的问题： 我有一个容器，有 2 个 div（内容和侧边栏），在侧边栏中有一个 div，在 div 中有一个元素（这是一个 wordpress 小部件）。 我想把元素放在主容器外面，全宽。

这是我想要的图片：

这是代码示例：

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

我尝试使用绝对位置，但效果不佳：/

Answer 1

绝对位置听起来像我的回答

在容器中使用相对位置，这样绝对元素会以容器为导向，你可以把元素放在你想要的位置。

你还需要摆脱左浮动

.container{
  position: relative;
  max-width:400px;
  height: 220px;
  border:1px solid blue;
  margin:0 auto;
  display: flex; /* or inline-block in content and float right in sidebar*/ 
  }
.content{
  background:grey;
  width:60%;
  margin-right:10%;
  }
.sidebar{
  background:grey;
  width:30%;
  }
.element{
  width: 100%;
  text-align: center;
  border:1px solid green;
  position: absolute;
  left: 0%;
  top: 100%;
  }

<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">
   <p>Lorem ipsum dolor sit amet,</p>
    <div>
      <div class="element">
        <p>This is my element</p>
      </div>
    </div>
  <div>
</div>

Answer 2

您可以像这样使用position: absolute，与display: flex 组合使用（因为您需要摆脱浮动，以便容器大小与内容一起使用）。

通过给container 一个位置，在本例中为relative，elements absolute 将与之相关。

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>

更新

基于cmets，这里有一个脚本解决方案，将元素移到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>