设置2级父母的全宽div？

Question

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

这是我想要的照片：

这是代码的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

通过为container提供一个位置，在这种情况下为relative，element s absolute将与之相关。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

你也可以使用浮点数，虽然这不是今天做布局的推荐方法。

通过将 clear float fix 应用到container它也可以使用，与我的第一个样本中使用的绝对定位一起，主要区别在于{{1}父母将崩溃。

＆＃13;

＆＃13;

elements

＆＃13;

.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%);
}

＆＃13;

＆＃13;

＆＃13;

<强>更新

根据评论，这是一个脚本解决方案，将元素移到<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>

之外

＆＃13;

＆＃13;

container

＆＃13;

window.addEventListener('load', function() {
  var element = document.querySelector('.element');
  var container = document.querySelector('.container')
  container.parentElement.insertBefore(element, container.nextSibling);  
})

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

绝对的位置听起来像是asnwer给我

在容器中使用position relative，这样具有absolute的元素将容器作为指南，你可以将元素放在你想要的位置。

你还需要摆脱浮动

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