Html 在表格单元格中放置了三个块 如何在表单元< /代码>中定位三个块： p1 顶部， p2 < /代码>底部， p3中间>

html如下所示：

  <div id="table">
    <div id="row">
        <div id="r2"></div> 
        <div id="r3"></div>
        <div id="r1">
            <div id="p1">top</div>
            <div id="p3">middle</div>
            <div id="p2">bottom</div> 
        </div>
    </div>
    
  </div>

---

详细信息-

IE7不支持

显示：表格

，因此您只需使用浮动和绝对定位即可

HTML:

<div id="wrapper">
  <div id="r2"></div>
  <div id="r3"></div>
  <div id="r1">
    <div id="p1">top</div>
    <div id="p3">middle</div>
    <div id="p2">bottom</div>
  </div>
</div>

#wrapper {
  width:500px;
  height: 1px;
  min-height: 300px;
}

#r1 {
  position: relative;
  width: 177px;
  border:1px solid black;
}

#r3 {
  width: 156px;
  background-color: #aef;
}

#r2 {
  width: 161px;
  border:1px solid black;
  background-color: #eee;
}

#r1, #r2, #r3 {
  float: left;
  height: 100%;
}

#p1, #p2, #p3 {
  position: absolute;
  width: 100%;
}

#p1 { 
  top: 0;
  background-color: gold; 
}

#p2 { 
  bottom: 0;
  background-color: crimson; 
}

#p3 { 
  top: 50%;
  margin-top: -0.5em;
  background-color: orange; 
}

---

请看这里：

您当前的方法有什么不起作用？您的小提琴对我很有用。但是，顺便问一下，你为什么要模拟一个表呢？我在ie7下改变了布局。如何定位以下三个块：P1顶部，P2底部，P3在中间。请帮忙。除非你真的需要使用IE7，否则我强烈建议你升级到更新的浏览器。这几天它的市场份额不到0.5%，我知道。但这是一项艰巨的任务。你能帮我吗？

#wrapper {
  width:500px;
  height: 1px;
  min-height: 300px;
}

#r1 {
  position: relative;
  width: 177px;
  border:1px solid black;
}

#r3 {
  width: 156px;
  background-color: #aef;
}

#r2 {
  width: 161px;
  border:1px solid black;
  background-color: #eee;
}

#r1, #r2, #r3 {
  float: left;
  height: 100%;
}

#p1, #p2, #p3 {
  position: absolute;
  width: 100%;
}

#p1 { 
  top: 0;
  background-color: gold; 
}

#p2 { 
  bottom: 0;
  background-color: crimson; 
}

#p3 { 
  top: 50%;
  margin-top: -0.5em;
  background-color: orange; 
}