Question

如何在表格单元格中定位三个块：p1 top，p2 bottom，p3 in middle？ 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，因此您只需使用浮点数和绝对定位即可。

<强> 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

在表格单元格中放置了三个块

1 个答案: