logo标签列表

如何在另一个div中水平定位两个div

csslayouthtml
56

我已经有很长一段时间没有使用CSS并且现在也没有参考资料了。我的问题应该相当简单，但是谷歌搜索无法提供足够的答案。因此，为了增加集体知识......

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

这就是我希望我的布局所呈现的样子，至少标题部分是这样。我想让副标题包含“sub-left”和“sub-right”，你能告诉我需要使用哪些 CSS 规则来确保一个 DIV 元素受到另一个 DIV 元素属性的限制吗？在这种情况下，如何确保“sub-left”和“sub-right”保持在“sub-title”内部？

12个回答
65

有一个常见的误解，认为你需要在底部放置一个clear:both的div，但实际上你并不需要。虽然foxy的回答是正确的，但你不需要那个非语义化、无用的清除div。你所需要做的就是给容器添加一个overflow:hidden：

#sub-title { overflow:hidden; }
3
非常感谢！我记得大约2年前曾追踪过这个问题，现在我记得使用了overflow:hidden。一回到笔记本电脑面前就会尝试这样做并将其作为正确答案。 - Josh Smeaton
没问题，让我知道它的进展如何。 - Darko
4
“Common misconception” 有点严厉，因为清除浮动的 div 是 W3C 推荐的方法，但这是一个不错的技巧。想了解更多信息，请访问 http://www.quirksmode.org/css/clearing.html。 - itsadok
1
常见误解是你需要一个清除浮动的div，而不是它是错误的、不能工作的或不推荐的。个人认为不应该推荐它，因为它不符合语义化标准（尽管在没有其他方法时我曾经使用过它）。 - Darko
我一直讨厌使用清除浮动的div方法...知道还有其他解决方案让我感到高兴。 - HopAlongPolly
35

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

<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;
}
这个答案帮助我解决了问题，我在底部添加了一个带有clear both css的div，它起作用了。 - samouray
9
这应该能够做到您所需的功能：
<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>

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

9

我同意Darko Z的观点，即将“overflow: hidden”应用于#sub-title。然而，需要指出的是，使用overflow:hidden清除浮动的方法在IE6中不起作用，除非您指定了宽度或高度。或者，如果您不想指定宽度或高度，可以使用“zoom: 1”：

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

这篇答案是为了解决你最后一句话所说的问题而补充在以上的解决方案上：

如何确保sub-left和sub-right保持在sub-title内部

问题在于，随着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：你是对的，我发现关于overflow:auto（或overflow:hidden）解决方案的最佳描述是在SitePoint上发布的文章中 Simple Clearing of FLoats，还有一篇456bereastreet文章中也有很好的描述 CSS Tips and Tricks Part-2。不得不承认，我太懒了，没有实施这些解决方案，因为关闭div虽然很不优雅，但却可以正常工作。所以，从现在开始，我要努力改正自己的问题。

3
0
你也可以使用CSS Grid框架来实现这一点，例如YUI网格或蓝图CSS。它们解决了许多跨浏览器问题，并使得即使是普通人可以实现更复杂的列布局。
0

使用CSS3的最佳和简单方法

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

#subleft,#subright{
     width:50%;
}
-1
-1
#sub-left, #sub-right
{
    display: inline-block;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接