Question

我试图让事情看起来像下面（这里不关心颜色。我关心的是形状）; enter image description here 我尝试了以下代码，但没有成功！

  <html>
    <head>
      <style type="text/css">

        #header{border:3px solid gray;padding:10px;}
        #header-left-container{border:1px solid gray;float:left;width:30%;}
        #header-right-container{border:1px solid gray;float:right;width:69%;}

      </style>
    </head>
    <body>

      <div id="header">

        <div id="header-left-container">
          pooo
        </div>
        <div id="header-right-container">
          bla bla bla.....
        </div>

      </div>

    </body>
  </html>

我知道这可以通过表格轻松完成，但我不想在我的应用程序中使用表格，我可以用div元素做同样的事情。

这里有什么建议吗？

Answer 1

http://jsfiddle.net/j4DnG/7/

您需要做的是清除2个浮动div的区域。通过现代技术实现这一目标，即为父母提供溢出属性：隐藏或自动（更适合你的东西。我建议隐藏）

在过去的人用户clearfix（google on that）。今天我们使用这种方法。

人们过去常说清楚：两者都创造了。这在dom中有另外一个元素。

Answer 2

您需要将overflow:auto;添加到#header css;如果没有这些划分，则不会展开以包含浮动元素。

Answer 3

添加

<br style="clear:both" />

之后的第二个div。或者使容器div浮动：左。或者，如果您在创建网页之前不想成为css master，请使用其中一个css框架。一个是http://960.gs/

答案 3 :(得分：1)

你的代码看起来很好......

建议：
只需在浮动div后添加clearfix，以便它们包含在父对象中，如：

<style>.clarFix{clear:both;}</style>
<div class="clearfix"></div>

答案 4 :(得分：0)

你使用萤火虫吗？去twitter.com看看他们如何定义左边和右边的容器是样式表。他们没有使用表来实现它。只是div

答案 5 :(得分：0)

只需将float: right;声明替换为margin-left: 30%;的{{1}}声明即可。你不需要漂浮他们两个。这样，如果左侧块比右侧块高，则只需要清除浮动。请参阅此fiddle。

Answer 4

你的代码看起来很好......

建议：
只需在浮动div后添加clearfix，以便它们包含在父对象中，如：

<style>.clarFix{clear:both;}</style>
<div class="clearfix"></div>

Answer 5

你使用萤火虫吗？去twitter.com看看他们如何定义左边和右边的容器是样式表。他们没有使用表来实现它。只是div

Answer 6

只需将float: right;声明替换为margin-left: 30%;的{{1}}声明即可。你不需要漂浮他们两个。这样，如果左侧块比右侧块高，则只需要清除浮动。请参阅此fiddle。

两个div元素彼此相邻（对于页眉）

6 个答案: