如何在另一个div中水平放置两个div答案

【问题标题】：How to position two divs horizontally within another div如何在另一个div中水平放置两个div
【发布时间】：2010-09-24 07:52:43
【问题描述】：

我已经很久没有使用 CSS 了，目前也没有参考资料。我的问题应该相当简单，但谷歌搜索并没有提供足够的答案。所以，增加集体知识...

|#header---------------------------------------------------------------|
|                               TITLE                                  |
|#sub-title------------------------------------------------------------|
|bread > crumb                    |                  username logout   |
|#sub-left                        |                          #sub-right|
|---------------------------------|------------------------------------|

这就是我想要的布局。反正就是标题。我希望副标题包含 sub-left 和 sub-right。我使用什么 css 规则来确保一个 div 受另一个 div 的属性约束。在这种情况下，如何确保 sub-left 和 sub-right 保持在 subtitle 内？

【问题讨论】：

标签： css layout html

【解决方案1】：

这是一个很常见的误解，即您实际上不需要在底部添加 clear:both div。虽然 foxy 的答案是正确的，但您不需要那个非语义、无用的清除 div。您需要做的就是将overflow:hidden 粘贴到容器上：

#sub-title { overflow:hidden; }

【讨论】：

非常感谢！我记得大约 2 年前追过这个问题，现在我记得使用溢出：隐藏。回到笔记本电脑后，我会立即尝试此操作，并将其作为正确答案。
没问题，让我知道结果如何
“常见的误解”有点苛刻，因为清除 div 是 w3c 推荐的方法，但这是一个巧妙的技巧。有关更多信息，请参阅quirksmode.org/css/clearing.html
常见的误解是您需要一个clearing div，而不是它的错误或不起作用或不推荐。我个人认为它不应该被推荐为它的非语义（虽然我之前没有其他方法可用时使用它）
我一直讨厌清晰的 div 修复...知道还有另一种解决方案让我很高兴。

【解决方案2】：

当您浮动sub-left 和sub-right 时，它们不再占用sub-title 内的任何空间。您需要在其下方添加另一个带有style = "clear: both" 的 div 以展开包含的 div，否则它们会出现在其下方。

HTML：

<div id="sub-title">
   <div id="sub-left">
      sub-left
   </div>
   <div id="sub-right">
      sub-right
   </div>
   <div class="clear-both"></div>
</div>

CSS：

#sub-left {
   float: left;
}
#sub-right {
   float: right;
}
.clear-both {
   clear: both;
}

【讨论】：

这个答案帮助我解决了我的问题，我在底部添加了一个 div 和一个清晰的 css 并且它有效

【解决方案3】：

这应该可以满足您的需求：

<html>
    <head>
        <style type="text/css">
            #header {
                text-align: center;
            }
            #wrapper {
                margin:0 auto;
                width:600px;
            }
            #submain {
                margin:0 auto;
                width:600px;
            }
            #sub-left {
                float:left;
                width:300px;
            }
            #sub-right {
                float:right;
                width:240px;
                text-align: right;
            }
        </style>

    </head>
    <body>
        <div id="wrapper">
            <div id="header"><h1>Head</h1></div>
            <div id="sub-main">
                <div id="sub-left">
                    Right
                </div>
                <div id="sub-right">
                    Left
                </div>
            </div>
        </div>
    </body>
</html>

您可以使用包装类控制整个文档，或者使用子主类控制两列。

【讨论】：

【解决方案4】：

我同意 Darko Z 将“溢出：隐藏”应用于#sub-title。但是，应该提到溢出：清除浮动的隐藏方法不适用于 IE6，除非您具有指定的宽度或高度。或者，如果您不想指定宽度或高度，可以使用“缩放：1”：

#sub-title { overflow:hidden; zoom: 1; }

【讨论】：

【解决方案5】：

此答案添加到上述解决方案中，以解决您的最后一句话：

我如何确保 sub-left 和 sub-right 保持在 subtitle 内

问题在于，随着 sub-left 或 sub-right 的内容扩展，它们会扩展到 sub-title 下方。这种行为是设计在 CSS 中的，但确实会给我们大多数人带来问题。最简单的解决方案是使用带有 CSS Clear 声明样式的 div。

为此，包括一个 CSS 语句来定义一个结束 div（可以是 Clear Left 或 RIght 而不是两者，这取决于所使用的 Float 声明：

#sub_close {clear:both;}

HTML 变成：

<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>

抱歉，刚刚发现这是之前发的，不应该在输入我的回复时煮那杯咖啡！

@Darko Z：你说得对，我发现的关于溢出：自动（或溢出：隐藏）解决方案的最佳描述是不久前在 SitePoint 上的一篇帖子Simple Clearing of FLoats 中也有一个很好的描述456beeastreet 文章CSS Tips and Tricks Part-2。不得不承认自己懒得实现这些解决方案，因为关闭 div cludge 工作正常，尽管它当然非常不雅。所以从现在开始会努力清理我的行为。

【讨论】：

【解决方案6】：

认真尝试其中一些，您可以选择固定宽度或更流畅的布局，选择权在您手中！也很容易实现。

IronMyers 布局

更多更多更多

【讨论】：

【解决方案7】：

您也可以使用 CSS 网格框架来实现这一点，例如 YUI Grids 或 Blue Print CSS。它们解决了很多跨浏览器问题，并使更复杂的列布局成为可能，供普通人使用。

【讨论】：

【解决方案8】：

使用 css3 的最佳且简单的方法

#subtitle{
/*for webkit browsers*/
     display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack: center;
     width:100%;
}

#subleft,#subright{
     width:50%;
}

【讨论】：

【解决方案9】：

可能是这样的……

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            #container
            {
                width:600px;
            }

            #head, #sub-title
            {
                width:100%;
            }

            #sub-left, #sub-right
            {
                width:50%;
                float:left;
            }

        </style>
    </head>

    <body>
        <div id="container">
            <div id="head">
                 #head
            </div>
            <div id="sub-title">
                #sub-title
                <div id="sub-left">
                    #sub-left
                </div>

                <div id="sub-right">
                    #sub-right
                </div>
            </div>
        </div>
    </body>
</html>

【讨论】：

这与我目前使用的非常相似。但是，假设我希望您示例中的“容器”在左下角和右下角 div 周围绘制边框，它不会起作用。

【解决方案10】：

与其使用overflow:hidden，这是一种hack，为什么不简单地设置一个固定的高度，例如height:500px，给上级部门？

【讨论】：

【解决方案11】：

#sub-left, #sub-right
{
    display: inline-block;
}

【讨论】：

【解决方案12】：

通过Bootstrap Grid，您可以轻松获得跨浏览器兼容的解决方案。

<div class="container">     
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
      Div1       
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
          Div2
    </div>
  </div>
</div>

jsfiddle：http://jsfiddle.net/DTcHh/4197/

【讨论】：

【解决方案13】：

你这样做：

<table>
   <tr>
      <td colspan="2">TITLE</td>
   </tr>
   <tr>
      <td>subleft</td><td>subright</td>
   </tr>
</table>

EASY - 我花了 1 分钟来打字。记住 CSS 文件需要下载到客户端，所以不用担心多余的标签，在这种情况下它是无关紧要的。

【讨论】：