3

我在弄清楚如何做到这一点时遇到了一些麻烦。我想要一个包装器，使我的网站居中，但其中一个标题元素需要一直延伸到页面的右边缘，但不扩大页面的宽度并添加滚动条。

见这里： http: //i49.tinypic.com/6rkaxc.jpg（新海报所以不能添加图片）

蓝色轮廓代表居中的包装器，橙色框是我试图使其适合页面右侧的标题 div。我已经让它使用 100% 宽度工作，但它创建了一个水平页面滚动，因为它使它的宽度与它的父级相同。我希望它为具有更高分辨率的用户扩展，因此它始终适合右侧。我希望这是有道理的。

我的代码看起来像......

<body>
<div id="wrapper">
   <div id="header">
   </div>

   <div id="left">
   </div>

   <div id="right">
   </div>
</div>
</body>

CSS：

div#wrapper {
 margin: 0 auto;
 width: 1020px;
 position: relative;
}

div#header {
 height: 150px;
 position: absolute;
 left: 510px;
 width: 100%;
}

div#left {
 width: 510px;
 float: left;
}

div#right {
 width: 100%;
 float: left;
}

我对这些东西很陌生，所以如果您发现这里有任何错误或不良做法，请指出！谢谢您的帮助！:)

4

2 回答 2

0

由于您希望内容的宽度固定，因此策略是为左右内容提供容器。这允许您使用width: 100%将延伸到末尾而没有滚动条的标题。然后，您使标题相对于正确的容器。这是一个你可以玩的jsfiddle。

注意我把宽度变小了，所以它适合我的 jsfiddle 窗口。

HTML：

<body>
    <div id="wrapper">
       <div id="leftContainer">
           <div id="left">
               This is left
           </div>
       </div>
       <div id="rightContainer">              
           <div id="header">
              This is a header
           </div>   
           <div id="right">
              This is right
           </div>        
       </div>
   </div>
</body>          ​

CSS：

div#wrapper {
 text-align: center;
 width: 100%;
 position: relative;
 white-space: nowrap;    
 overflow-x: scroll;  
}

div#header {
 z-index: 1000;
 height: 150px;
 position: absolute;
 left: 0;
 width: 100%;
 background: green;    
}

div#leftContainer {
 float: left;
 width: 50%;
 height: 500px;
 display: inline-block; 
}

div#left {
 float: right;
 width: 260px;
 height: 300px;
 background-color: purple;
}

div#rightContainer {
 position: relative;
 float: right;
 width: 50%;
 height: 500px;    
 display: inline-block;  
}

div#right {
 width: 260px;
 height: 300px;
 background-color: yellow;
}
于 2012-10-23T23:02:23.130 回答
0

试试这个。我将包装器宽度更改为 80%。不确定这是否可以。但是我在扩展页面时效果很好。将标题移到包装器之外，并为清晰起见添加了背景颜色。

注 1：右 DIV 的 margin-top 与标题 DIV 的高度大小相同。

HTML

<div id="outerWrapper">
    <div id="header">
            Header
    </div>
    <div id="wrapper">


        <div id="left">
            Left
        </div>

        <div id="right">
            Right
        </div>
    </div>
</div>

CSS

div#wrapper {
 margin: 0 auto;
 width: 80%;
 height: 100%;
 position: relative;
 background-color: #CCCCCC;
}

div#header {
 height: 150px;
 float: right;
 position: absolute; 
 left: 50%;
 width: 50%;
 background-color: yellow;
}

div#left {
 width: 50%;
 height: 100%;
 float: left;
 background-color: red;
}

div#right {
 width: 50%;
 height: 100%;
 float: left;
 margin-top: 150px;
 background-color: blue;
}

希望这可以帮助。

于 2012-10-23T23:41:11.210 回答