gpt4 book ai didi

CSS:使元素填充浏览器宽度,同时保持其他元素以定义的宽度居中

转载 作者:行者123 更新时间:2023-11-28 18:35:46 24 4
gpt4 key购买 nike

我正在尝试在 CSS 中创建以下布局:

enter image description here

这是一种典型的 Web 布局,其中所有内容都在一个包装器 DIV 中,该 DIV 具有已定义的宽度并位于页面中央。

但是,紫色背景是 CSS 渐变,需要填充浏览器的整个宽度(而不仅仅是内容包装器的宽度)。此外,不同的页面会有不同行的标题/简介文本(例如,一些页面可能有 3 行,其他页面只有 1 行),因此紫色背景需要与该内容的高度相匹配。

我还使用了一个 CMS,它将所有内容放在一个包装器中,该包装器具有一定宽度并以 margin:auto 为中心。

如何实现布局?

起初我虽然可以在标题/介绍 div 上使用 position:absolute。这很好用。除了其余内容隐藏在标题/介绍 div 后面。请在此处查看示例:http://jsfiddle.net/5BkX6/1/

然后我尝试在标题/介绍 div 上使用 position:relative,然后使用负左值和填充来拉伸(stretch) DIV 的背景,同时保持内容居中。请在此处查看示例:http://jsfiddle.net/4DZYr/1/

这个方法效果很好,除了它创建了一个水平滚动条。我知道我可以将 overflow-x:hidden 应用到主包装器 DIV 以隐藏滚动条,但我不想首先使用它。

我怎样才能实现我的目标。我不想使用 jquery 来获取标题/介绍 DIV 的高度。

最佳答案

这应该给你你想要的布局 ^^这是 Html

<body>
<div class="header">
<div class="contentheader">This is the header</div>
</div>
<div class="container">
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>

这是风格

.header{
width : 100%;
background : #0033aa;
height : 100px;
}
.contentheader{
width : 1000px;
margin : 0 auto;
}
.container{width : 100%;
}
.content{
width : 1000px;
margin : 0 auto;
}
.left {
width : 300px;
display : inline-block;
height : 200px;
background : #3300aa;}
.right{
width : 700px;
display : inline-block;
height : 200px;
background : #aa0033;}

关于CSS:使元素填充浏览器宽度,同时保持其他元素以定义的宽度居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12760750/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com