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

Posted 2023-03-06

【中文标题】设置具有 2 级父母的全宽 div？

【英文标题】：Set full width div with 2 levels of parents?

【发布时间】：2017-03-19 02:01:40

【问题描述】：

这是我的问题： 我有一个容器，有 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>
     

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

【问题讨论】：

我的直觉告诉我这是使用绝对定位的不好方法。是否有理由不能将元素放在两列布局下方的 div 中并仍然使用常规文档流（位置：相对）？

将 div 移动到两列下方有点棘手（是自定义 WordPress 主题），所以我必须修改很多文件才能做到这一点。问题是 WordPress 核心的更新，或者我害怕代码的 Wordpress 主题会被破坏。

【参考方案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>

【参考方案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>

【讨论】：

哇，我永远不会玩这样的把戏。我会尝试将它包含在我的代码中，我会尽快回复您；）

你也可以看看 display:table 如果元素有一个静态的已知宽度codepen.io/anon/pen/yVyBbO ;) 但在我看来，应该把 .element 去掉侧边栏。 javascript 可以操纵 dom ;)

@GCyrillus 完全同意去掉侧边栏

你们是对的人。我多次尝试使用 CSS 正确显示。然后，我尝试取出修改 php/HTML 的元素，但主题有点棘手。所以，如果你有一个解决方案可以使用 JS 从侧边栏中取出元素，我会接受它！

@AlbertoV 将很快发布更新，展示如何使用脚本来做到这一点