CSS 向左浮动到以页面为中心的 Div

Posted 2023-03-06

【中文标题】CSS 向左浮动到以页面为中心的 Div

【英文标题】：CSS Float left to a Div centered on the page

【发布时间】：2013-12-04 11:45:52

【问题描述】：

我的页面中间有一个 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>

现在，如果我将 float left 应用于容器，它会删除使其位于页面中间的边距。那么我如何让它们并排但让容器在中间爆炸。请注意，#container 没有外部容器，因为我需要容器位于中间而不是外部容器位于中间。

提前致谢。

伊恩

【问题讨论】：

如果没有外部容器，您将无法实现这一点。

你需要一个父容器

hmmm，使用外部/父容器意味着外部容器将居中，这意味着由于#sidecontainer 在同一个 div 中，#containber 会稍微偏离中心

【参考方案1】：

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

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

CSS

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

【参考方案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>

【讨论】：

Surly 这会将新的#container 放在页面中间，因此容器会稍微偏离中心，我需要将#container 放在中间

【参考方案3】：

你的意思是这样吗？ 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
    

【讨论】：

这会将#sidecontainer 浮动在#container 内，我需要它在#container 之外