html - 在表格单元格中放置三个 block

Question

如何在 table-cell 中定位三个 block 如下:p1 top, p2 bottom, 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>

CSS

    #table{
        display: table;
        width:500px;
        height:500px;
        max-height:500px;
        min-height: 500px;
    }
    #row{
        display:table-row;
    }

#r1, #r2, #r3{
 display:table-cell;
 }

详情- http://jsfiddle.net/2ZF6J/

Answer 1

IE7 不支持 display: table 所以你可以简单地使用 float 和绝对定位。

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>

CSS:

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

在这里查看:http://jsbin.com/ekImIYih/3