gpt4 book ai didi

html - 将一个 div 与使用边距 : 0 auto 的 div 对齐

转载 作者:太空狗 更新时间:2023-10-29 16:42:49 25 4
gpt4 key购买 nike

这是我第一次来这个论坛,我会尽量说清楚,我在为自己创建一个小网站时遇到了问题,特别是标题。我正在尝试创建一个具有 1024px 中心包装的页面(边距:0 自动;),我想要 2 个 div,在此包装的两侧,我可以在其中使用另一张图片作为背景。我当前的 CSS 看起来像这样:

body, html      
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}

我的 html 看起来像:

<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>

我想要完成的是让一个标题在左侧和右侧继续(两个标题使用不同的背景),在这种情况下它确实在左侧工作,因为我使用负边距,因为我使用50% 宽度和恰好一半的 wrapper (-512px),这可行,但如果我尝试在右侧使用负边距(margin-right:-512px),这将在右侧扩展页面额外512px,这不是我的本意。

我整天都在谷歌搜索,但似乎找不到我的问题的任何答案,还尝试用 float: left 制作 3 个 div,但无法弄清楚如何在中心制作 1 个宽度为 1024px 的 div其余的 100% 宽度,如果有人能帮助我,我将不胜感激。

亲切的问候

最佳答案

我不完全确定你想要它的样子,但我会试一试。
如果我跑题了,也许你可以给我提供一些示意图?

无论如何,下面给出的示例没有使用您的特定代码,但它应该让您了解它是如何完成的。


结果:first example

左右标题是“无限的”,因为它们总是填满整个页面的宽度。
中间的标题覆盖了其余部分。如果您有背景图片,您可以使用 background-position 来定位它们,以便它们与中间标题的左右边缘对齐。


代码 | JSFiddle example

HTML

<div class='side_wrapper'>
<div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
Content here
</div>

CSS

.header, .side_wrapper, .left_header, .right_header{
height: 100px;
}

.header, .content{
width: 400px;
margin: 0 auto;
}

.side_wrapper{
width: 100%;
white-space: nowrap;
}

.left_header, .right_header{
width: 50%;
display: inline-block;
}

.left_header{
background-color: blue;
}

.right_header{
background-color: lightblue;
}

.header{
position:absolute;
top: 0;
left: 50%;
margin-left: -200px;
background-color: red;
}

.content{
background-color: green;
text-align: center;
}

关于html - 将一个 div 与使用边距 : 0 auto 的 div 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13049834/

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