Question

我的页面中间有一个div用作从我的内容到菜单的所有内容的容器，现在我的客户希望在此方面有一个额外的框。我使用此代码来集中容器：

#container {
    width:960px;
    margin:0 auto;
}

我希望另外一个div让我们这样说：

    #sidecontainer {
        width:200px;
        float:left;
    }

剥离了html的版本：

<div id="container">stuff (Divs and other jazz)</div>
<div id="sidecontainer">stuff (Divs and other jazz)</div>

现在，如果我将浮动左侧应用于容器，则会删除在页面中间获取它的边距。那么如何将它们并排放置，让容器在中间爆炸。注意我没有#container的外部容器，因为我需要容器位于中间而不是外部容器中间。

提前致谢。

伊恩

Answer 1

你是说这个意思吗？ http://jsfiddle.net/HLUYj/

 <div id="container">
    <div id="sidecontainer"></div>
</div>
#container {
    width:960px;
    margin:0 auto;
    background: red;
    height:200px
}
  #sidecontainer {
        width:200px;
        float:left;
    background:green;
        height:200px
    }

Answer 2

你可以将它们包装在一个新的div中。

#new-container{
    width: 1160px;
    margin: 0 auto;
}

#container{
    width: 960px;
}

#sidecontainer{
    width: 200px;
    float: left; /* You might want to use display:inline-block instead */
}

因此，您的HTML代码应为：

<div id="new-container">
    <div id="container"></div>
    <div id="sidecontainer"></div>
</div>

Answer 3

你可以尝试这样做：http://jsfiddle.net/vgXn5/

但是如果您的页面不是固定大小，我认为您应该使用父容器。这样做的原因是你要调整大小，＃sidecontainer会溢出#container。

<强> CSS

#sidecontainer {
        width:200px;
        position:absolute;
    background-color:blue;
    }
#container {
    width:300px;
    position:absolute;
    margin-left:-150px;
    left:50%;
    background-color:black;
}

CSS Float离开了以页面为中心的Div

3 个答案: