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 保持在 subtitle 内？

4

12 回答 12

65

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

#sub-title { overflow:hidden; }
于 2008-11-27T19:50:23.160 回答
35

当您漂浮时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;
}
于 2008-11-27T12:46:29.177 回答
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>

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

于 2008-11-27T12:39:33.373 回答
9

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

#sub-title { overflow:hidden; zoom: 1; }
于 2008-11-28T23:52:58.073 回答
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并且在 456bereastreet 中也有一个很好的描述文章CSS 提示和技巧第 2 部分。不得不承认自己懒得实现这些解决方案，因为关闭 div cludge 工作正常，尽管它当然非常不雅。所以从现在开始会努力清理我的行为。

于 2008-11-27T12:59:33.690 回答
3

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

IronMyers 布局

更多更多更多

于 2008-11-27T12:51:55.360 回答
0

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

于 2008-11-27T12:41:54.927 回答
0

使用 css3 的最佳和简单方法

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

#subleft,#subright{
     width:50%;
}
于 2012-09-01T07:12:47.167 回答
-1

大概是这样的……

<!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>
于 2008-11-27T12:34:15.660 回答
-1 
#sub-left, #sub-right
{
    display: inline-block;
}
于 2014-02-26T00:16:12.433 回答
-1

通过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/

于 2015-02-11T05:20:30.217 回答
-6

你这样做：

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

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

于 2010-11-25T22:53:40.157 回答