无法正确安排div

我无法让我的div正确布局。我想要一个200px高的顶栏，占用100％的宽度。在那是一个左边的酒吧，宽度是200px，高度是100％，然后右边的酒吧将占据剩下的空间。无法正确安排div

我在这里做错了什么？

<!DOCTYPE html> 
<html> 
<head> 
    <title>my view</title> 

    <style> 
     #tb { 
      background-color:#cc0000; 
      height:200px; 
      width:100%; 
      position:relative; 
     } 

     #lb { 
      background-color:#00cc00; 
      width:200px; 
      height:100%; 
      float:left; 
     } 

     #rb { 
      background-color:#cccccc; 
      height:100%; 
      float:right; 
     } 
    </style> 

</head> 
<body> 
<div id="page" style="width:100%;height:100%"> 

    <div id="tb" style=""/> 
    <div id="lb"/> 
    <div id="rb" style=""/> 

</div> 
</body> 
</html>

它看起来更糟糕，当我把在div的一些内容：

<div id="tb" style="">test</div> 
    <div id="lb">test</div> 
    <div id="rb" style="">test</div>

来源

2012-06-28 Triton Man

作为参考，''div id =“lb”/>'不是有效的HTML。需要结束标签的元素不能自动关闭。（自闭标签是XML的一种，*可能*在XHTML中有效......但不在HTML中。） – cHao

height: 100%或width: 100%不是大小的休息，但母公司的整体规模，即整个文档。

Here是你想要使用表格的一个例子。

Here是一个divs的例子。

来源

2012-06-28 13:33:25

我应该使用表而不是div吗？我认为使用表格除了表格数据是糟糕的设计。 –

我试图开发一个解决方案与divs为你:) –

表很容易（IMO）工作时，它涉及到像你这样的设计，但是，他们现在通常被避免 – BBog

如果你想要弹性布局，然后给你的包装div #page一些最小和最大宽度，那么你的设计的顶部标题将根据父div的div宽度#page。这不是一个好主意给你的包装div高度，但你可以使用最小高度。

来源

2012-06-28 13:39:18 Mudasser

你不能设置的div自行关闭顺便说一句 - >这里有一个例子，你http://jsfiddle.net/QHTeS/2/

#tb { 
    background-color:#cc0000; 
    height:200px; 
    width:100%; 
} 

#lb{ 
    float: left; 
    background:red; 
    width:200px; 

} 

#rb{ 

    background:green 
}

来源

2012-06-28 13:39:32 SpaceBeers

-2

为了填补你需要使用绝对定位，而不是页面的确切部分，因为百分比宽度/高度与父级的大小有关。

<!DOCTYPE html> 
<html> 
<head> 
    <title>my view</title> 

    <style> 
     #tb { 
      background-color:#cc0000; 
      position:absolute; 
      top:0px; 
      left:0px; 
      bottom:200px; 
      right:0px; 
     } 

     #lb { 
      background-color:#00cc00; 
      position:absolute; 
      top:200px; 
      left:0px; 
      bottom:0px; 
      right:200px; 
     } 

     #rb { 
      background-color:#cccccc; 
      position:absolute; 
      top: 200px; 
      left:200px; 
      bottom:0px; 
      right:0px; 
     } 
    </style> 

</head> 
<body> 
<div id="page" style="width:100%;height:100%"> 

    <div id="tb" style=""></div> 
    <div id="lb"></div> 
    <div id="rb" style=""></div> 

</div> 
</body> 
</html>

来源

2012-06-28 13:41:18 chillbreeze

-1

第一个div是一对元件，从而<div></div>

与DIV流体布局是有点麻烦。

这应该为你工作：

<!DOCTYPE html> 
<html> 
<head> 
<title>my view</title> 

<style> 
    html, body {height: 100%;} 
    #tb { 
     background-color:#cc0000; 
     height:200px; 
     width:100%; 
     position:relative; 
    } 

    #lb { 
     background-color:#00cc00; 
     width:200px; 
     height:100%; 
     float:left; 
     margin-left: -200px; 
    } 

    #rb { 
     background-color:#cccccc; 
     height:100%; 
     float:right; 
     width: 100%; 
    } 

    #content { 
     margin-left: 200px; 
     height: 100%; 
    } 
</style> 

</head> 
<body> 
<div id="page" style="width:100%;height:100%"> 

    <div id="tb" style=""></div> 
    <div id="content"> 
     <div id="lb"></div> 
     <div id="rb" style=""></div> 
    </div> 

</div> 
</body> 
</html>

来源

2012-06-28 13:43:28

使用<div> S和CSS（即不表） - 布局只是不以这种方式工作。（另外，正如一位评论者指出的，一些HTML无效）。

浮动元素高度将主要取决于它们中的内容。你陷入了认为“高度”CSS声明意味着你期望的含义的陷阱。（“忘掉你学到的东西”）

你将不得不接受与普通的HTML/CSS流程，这两个较低的div将是不同的高度。你可以，但是，假你后面的效果像Faux Columns。

来源

2012-06-28 13:43:44 chipcullen

无法正确安排div

回答

相关问题