Question

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

见这里：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;
}

我对这些东西很陌生，所以如果您发现此处有任何错误或不良做法，请指出它们！谢谢您的帮助！：）

Answer 1

由于您希望内容的宽度固定，因此策略是为左右内容提供容器。这允许您使用width: 100%作为标题，该标题将延伸到没有滚动条的结尾。然后，您将相对于正确的容器创建标题。 Here是你可以玩的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;
}

Answer 2

试试这个。我将包装宽度更改为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;
}

希望这有帮助。

我可以从一个居中的包装器中将元素拉伸到浏览器窗口的右侧吗？

2 个答案: