这是我的问题:
我有一个容器,有两个div(content&sidebar),在sidebar中有一个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>
我试过用绝对位置,但效果不太好:/
最佳答案
您可以像这样使用position: absolute
,与display: flex
结合使用(因为您需要去掉浮动以便容器大小与内容)。
通过给container
一个位置,在本例中relative
,element
sabsolute
将与之相关。
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>
更新
基于注释,这里有一个脚本解决方案,将元素移到
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个级别的 parent 的全宽div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40436175/