Html 使用div标记将页面分成三部分

我试图得到下面的布局超过1.5小时，但仍然无法得到正确的解决方案

如果有重复的话，请原谅我问这个问题

我想使用div标记创建一个如下图所示的布局：

|\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu强 ||| ||| ||| ||| ||\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu ||| ||| ||| ||| ||| ||| ||| ||| |\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu强

---

我知道如何使用table标签。float:left是你的朋友

HTML:

示例：

这里是精确的或

将CSS设置为

#upleft { 
   width:100px; 
   height: 300px; 
   background:red; float:left; 
}

#upright { 
   width:300px; 
   height:200px; 
   background:blue; 
   float:left
}
#below { 
   height:300px; 
   width:400px; 
   background:green 
}

在HTML中

<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>

---

尝试以下css和html代码：

CSS:

#左{
浮动：左；
宽度：27%；
高度：25公分；
保证金：1px.2me1px 1px；
边框：2倍纯绿；
}
#内容{
利润率：1px.2me1px28%；
}
#cnt1{
相对位置；
边缘：.3em2px；
高度：10公分；
边框：1px纯蓝色；
}
#碳纳米管2{
相对位置；
边缘：.3em2px；
身高：100%；
}

HTML:

左侧
向上的
向下

您尝试的任何代码都会很有用。你能使用twitter引导吗？谢谢，它解决了问题。最后一个问题是：@Mr.polywhill谢谢。它工作得很好。在我的大屏幕上（linux，使用最新的chromium stable），绿色的div在我的所有div下面。@Naveen，是的，它被修复了now@Arda这对你合适吗？这对我来说是固定的，在

位置；亲属真的需要吗？还有一个打字错误。
#upleft { 
   width:100px; 
   height: 300px; 
   background:red; float:left; 
}

#upright { 
   width:300px; 
   height:200px; 
   background:blue; 
   float:left
}
#below { 
   height:300px; 
   width:400px; 
   background:green 
}

<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>

<style type="text/css">
#left {
  float:left;
  width:27%;
  height: 25em;
  margin:1px .2em 1px 1px;
  border: 2px solid green;
}
#content {
  margin:1px .2em 1px 28%;
}
#cnt1 {
  position;relative;
  margin:.3em 2px;
  height: 10em;
  border: 1px solid blue;
}
#cnt2 {
  position;relative;
  margin:.3em 2px;
  height: 100%;
}
</style>

<div id="left">Left side</div>
<div id="content">
  <div id="cnt1">Up</div>
  <div id="cnt2">Down</div>
</div>
<br style="clear:both;" />