Question

在我的网站设计中，我需要一个以1280像素宽的页面为中心的div。

div中的内容将以960px宽为中心，以适应大多数浏览器尺寸。

我需要外部div上的额外宽度，以便在左/右侧均匀隐藏溢出，以便在浏览器调整大小/变小时，div会溢出查看窗口。

布局目前与此类似：

<div> //outer div: width 100%
  <div> //inner div: width 1280 pixels wide with background
    <div> //centered content: 960px wide

    </div>
 </div>

enter image description here

在上图中，深蓝色为1280像素宽。较浅的蓝色是960px宽，以页面为中心。

当浏览器调整大小时，我需要将深蓝色从屏幕两侧溢出（隐藏）。最后在水平滚动条出现之前只留下较浅的蓝色居中。

有什么想法吗？

修改

我目前的问题是外部1280px div不会正常溢出导致中心div偏离中心。

小提琴

http://jsfiddle.net/tKtwg/1/

在上面的小提示中，您可以看到在减小窗口大小时外部div不会均匀溢出。 修改2 我想要避免的是水平滚动条出现，直到达到960宽div。对不起我应该更清楚

Answer 1

body
{
    background-color: #00a2e8;
    width: 100%;
}


.content
{   
    background-color: #99d9ea;
    width: 960px;
    margin: 0 auto; 
    min-height: 1000px
}

Answer 2

在您的浏览器中检查一下，这将位于中心，您不必指定负左边距。

您可以根据需要更改宽度，它将显示在中间。

<html>
<head></head>
<style type="text/css">
body{margin-top:0;}

.Main{
 width:100%;
 background-color:blue;
 margin-top:0;
}

.Outerdiv{
 background-color:orange;
margin-top:0;
 margin-left:auto; 
 margin-right:auto;
 width:1024px;
 height:500px;
}

.Innerdiv{
background-color:green;
margin-left:auto; 
margin-right:auto;
width:960px;
height:200px;
}
</style>
<body>
<div class="Main"> 
  <div class="Outerdiv"> 
    <div class="Innerdiv"> 
<p></p>
    </div>
 </div>

</body>

</html>

余量：汽车;并不总是以内容为中心。明确提到左边距和右边距的值为自动，然后它们将显示在中心。

Answer 3

这是怎么回事？ http://jsfiddle.net/JGJBG/2/

.main{width: 100%; background-color:red; overflow: hidden; height: 100%;}

.outer
{
    width:1280px;
    background-color:aqua;
    position: absolute;
    left: 50%;
    margin-left: -640px;
    min-height: 100%;    
}

.center
{
    width:960px;
    position:absolute;  
    left: 50%;
    margin-left: -480px;
    background-color: blue;    
    min-height: 100%;   
}

如何使固定宽度div在页面的两侧都有相同的隐藏溢出

3 个答案: