5

这是我第一次在这个论坛上，我想尽可能清楚，我在为自己创建一个小网站时遇到了问题，特别是标题。我正在尝试创建一个具有 1024px 中心（边距：0 auto;）的包装器的页面，并且我想要 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% 宽度并且恰好是包装器的一半（-512px），这是可行的，但是如果我尝试在右侧使用负边距（margin-right：-512px），这会将右侧的页面扩展为额外的 512px，这不是我的本意。

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

亲切的问候

4

3 回答 3

1

我不完全确定你希望它是什么样子，但我会试一试。
如果我走得很远，也许你可以给我提供一个示意图？

在任何情况下，下面给出的示例都没有使用您的特定代码，但它应该让您了解它是如何完成的。

结果：第一个例子

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

代码 | JSFiddle 示例

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;
}
于 2012-10-24T14:23:54.350 回答
0

您希望将两个标头从包装器中取出并放在一边，对吗？如果我是对的，试试这个：

<body>

<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!-->
<div id="header_right"></div><!--End header right!-->
</body>

和 ：

display: inline; float: left;

在每个元素中（header-left，header-right，wrappper），并离开负边距

于 2012-10-24T13:14:50.303 回答
0

在你的 div 中使用 float:left; 这应该意味着在包装器中，只要有足够的空间，它们就会彼此相邻浮动，例如 css：

#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}

html

<div id "divWrapper">
   <div id = "divLeft">content here</div>
   <div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->

用于操作 css 的一个非常好的工具是 Firefox 中的 Firebug https://getfirebug.com/

如果你想要一个中心 div 试试这个：http: //jsfiddle.net/kzfu2/1/

于 2012-10-24T13:27:44.107 回答