html - 设置具有 2 个级别的父级的全宽 div?

标签 html wordpress css widget

这是我的问题: 我有一个容器,有 2 个 div(内容和边栏),在边栏中有一个 div,在 div 中有一个元素(这是一个 wordpress 小部件)。 我想将元素放在主容器之外,并具有全宽。

这是我想要的图片: enter image description here

这是代码的一个例子:

.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 结合使用(因为您需要摆脱 float ,以便容器大小随内容变化)。

通过给 container 一个位置,在本例中是 relativeelementabsolute 将与

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>

您也可以使用 float ,尽管这不是当今推荐的布局方式。

通过将 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>

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

相关文章:

wordpress - 与 Cakephp 一起安装 WordPress

javascript - 如何在提交前获取 WooCommerce 订单数据?

string - 如何使用 CSS 避免文本重叠?

html - 显示隐藏文本时如何防止表格行重新调整大小?

javascript - 用另一个文本替换所选内容

javascript - 在网络音频缓冲区中安排回调

WordPress 主题中 PHP 变量到 js 变量

html - 如何使 Bootstrap Navbar 保持折叠状态

html - 如何在不影响顶部内容的情况下使背景图像模糊?

html - 多个背景相互叠加(正常、拉伸(stretch)、正常)