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

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

css

Css 我可以从居中的包装器中将元素拉伸到浏览器窗口的右侧吗？,css,Css,我想不出怎么做。我想有一个包装器，这样我的网站是居中的，但其中一个标题元素需要一直延伸到页面的右边缘，但不扩大页面的宽度和添加滚动条请参见此处：（新海报，因此无法添加图像）蓝色的轮廓表示居中的包装，橙色的框是标题div，我正试图将其放在页面的右侧。我已经让它使用100%的宽度工作，但它创建了一个水平页面滚动，因为它使它的宽度相同，因为它的父母。我希望它能为分辨率更高的用户扩展，因此它总是紧贴右侧。我希望这是有道理的我的代码看起来像 <body> <div id="wrap

我想不出怎么做。我想有一个包装器，这样我的网站是居中的，但其中一个标题元素需要一直延伸到页面的右边缘，但不扩大页面的宽度和添加滚动条

请参见此处：（新海报，因此无法添加图像）

蓝色的轮廓表示居中的包装，橙色的框是标题div，我正试图将其放在页面的右侧。我已经让它使用100%的宽度工作，但它创建了一个水平页面滚动，因为它使它的宽度相同，因为它的父母。我希望它能为分辨率更高的用户扩展，因此它总是紧贴右侧。我希望这是有道理的

我的代码看起来像

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

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

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

我对这些东西很陌生，所以如果你注意到这里有任何错误或不好的做法，请指出它们！谢谢你的帮助！：）

因为您希望内容的宽度是固定的，所以一种策略是为左内容和右内容设置容器。这允许您使用

width:100%

作为页眉，页眉将延伸到末尾，而不带滚动条。然后使标题相对于正确的容器。是一个可以玩的JSFIDLE

注意，我将宽度缩小了，这样就可以放在我的JSFIDLE窗口中

HTML:

试试这个。我把包装宽度改为80%。我不知道这样行不行。但我在扩展页面时效果很好。将标题移到包装器外，并添加了背景色以保持清晰

注1：右侧DIV的边距顶部与收割台DIV的高度大小相同

HTML

希望这能有所帮助。

只是让您知道您发布的代码与示例图像中的布局完全不同。编辑：您缺少一个“在你的HTML中，和：应该是；在你的div#wrapper中，我手写了出来，它们在我的文件中是正确的。-现在已修复，谢谢您指出！我喜欢这样，但我发现的唯一问题是，当缩小页面时，内容可能开始重叠，因为我会在页眉div的左侧有一些内容。我用更新的JSFIDLE编辑了我的答案。希望这就是你想要的。

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;
}

<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>

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;
}

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


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

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

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;
}