Question

这是我第一次参加这个论坛并且尽可能地清楚，我有一个问题就是为我自己创建一个小网站，特别是标题。我试图创建一个页面，其中包含1024px中心（margin：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），这是有效的，但如果我尝试在右边使用负边距（边距右：-512px），这将扩展右边的页面额外512px，这不是我的意图。

我一整天都在谷歌搜索，但似乎无法找到我的问题的任何答案，也尝试用浮动做3个div：左，但无法弄清楚如何在中心制作1宽度为1024px其余的100％宽度，如果有人可以帮助我，将非常感激。

亲切的问候

Answer 1

我不完全确定你想要它的样子，但我会试一试如果我离开了，也许你可以给我一个各种各样的原理图？

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

结果： 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;
}

Answer 2

你想要将两个标题从包装器中取出并放在一边吗？如果我是对的，试试这个：

<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），并且走出负边距

Answer 3

在你的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 https://getfirebug.com/

中的Firebug

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

将一个div与使用margin的一个div对齐：0 auto

3 个答案: