将全宽 div 设置为 2 级父项？

Question

这是我的问题：我有一个容器，有 2 个 divs（内容和边栏），在边栏中有一个 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>

您也可以使用浮动，但目前不推荐使用浮动布局。

通过将 clear float fix 应用到 container 它也可以工作，连同我第一个示例中使用的绝对定位，主要区别在于elements parent 会崩溃。

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

将全宽 div 设置为 2 级父项？

Set full width div with 2 levels of parents?

html

css

wordpress

widget