Question

我没有玩过很长时间的CSS，而且目前还没有引用。我的问题应该相当容易，但谷歌搜索没有提出足够的答案。所以，增加集体知识......

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

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

Answer 1

当你真的没有时，你需要在底部有一个clear:both div，这是一种常见的误解。虽然foxy的答案是正确的，但您不需要那种非语义，无用的清算div。您需要做的就是将overflow:hidden粘贴到容器上：

#sub-title { overflow:hidden; }

Answer 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;
}

Answer 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>

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

Answer 4

我同意Darko Z将“overflow：hidden”应用于#sub-title。但是，应该提到的是，除非你有指定的宽度或高度，否则清除浮动的overflow：hidden方法对IE6不起作用。或者，如果您不想指定宽度或高度，可以使用“zoom：1”：

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

Answer 5

这个答案增加了上述解决方案，以解决您的上一句话：

如何确保左下和右下留在子标题

问题在于，随着左下或右下的内容扩展，它们将扩展到副标题以下。此行为是针对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：你是对的，我发现的溢出：auto（或overflow：hidden）解决方案的最佳描述是在SitePoint上发布的帖子Simple Clearing of FLoats并且还有一个好处456bereastreet文章CSS Tips and Tricks Part-2中的描述。不得不承认自己懒得自己实施这些解决方案，因为关闭的div cludge工作正常，虽然它当然非常不优雅。因此，从现在开始努力清理我的行为。

Answer 6

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

IronMyers布局

更多

Answer 7

您还可以使用CSS Grids框架实现此目的，例如YUI Grids或Blue Print CSS。它们可以解决很多交叉浏览器问题，并且可以使用更复杂的列布局来使用它们。

Answer 8

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

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

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

Answer 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>

Answer 10

为什么不简单地设置一个固定的高度，而不是使用overflow:hidden，这是一种黑客攻击，例如height:500px，到父母部门？

Answer 11

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

Answer 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/

Answer 13

你这样做：

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

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

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

13 个答案:

IronMyers布局

更多