我有这个示例布局。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {
padding: 0;
min-width: 960px;
height: 500px;
border: 1px solid red
}
.boxed-layout .wrapper {
width: 1000px;
background: #FFF;
margin: 0 auto;
}
.inner {
width: 960px;
position: relative;
margin: 0 auto; /* main width */
}
.responsive .inner {
max-width: 960px;
width: auto;
}
</style>
</head>
<body>
<div class="inner wrapper"></div>
</body>
</html>
现在我需要在包装器中添加一个全宽的 div。所以我尝试了这种方式
.banner {
position: relative;
left: -100px;
max-width: 2000px;
width: auto;
border: 1px solid green;
height: 400px;
}
和
<div class="banner"></div>
但效果不佳。
- 使用负左移动到零的相对定位是否正确？
- 如果我使用
width: 2000px而不是auto，会出现水平滚动条
那么，我怎样才能拥有完整的宽度和响应式呢？
最佳答案
您必须从包装器容器(即 inner 类容器)中删除 position:relative。然后对于横幅使用以下标记:
HTML
<div class="banner">
<div class="banner-inner"></div>
</div>
CSS
.banner {
position: absolute;
left: 0;
right: 0;
}
.banner-inner {
position:relative;
margin:0 auto;
max-width: 2000px;
}
如果你不想删除 position:relative 出于某种原因，那么你必须使用 javascript/jQuery 如下(保持标记与上面相同):
var marg = ($(window).width()-960)/2;
$('.banner').css({'left':-marg+'px','right':-marg+'px'});
关于html - 将全宽 div 放入内容包装器中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23867257/