css - 使用 css 中的浮点数创建 3 x 3 矩阵

Question

可能重复：
如何在 css 中使用浮动创建表格布局

我想使用 css 的 float 属性创建 3 x 3 矩阵。列必须具有相等的高度和宽度，并且可以跨浏览器压缩。我希望列的高度必须是一行中最大列的高度

CSS

   div.outer
 {
   width:700px;
   float:left;
   position:relative;
   overflow:hidden;
  }


div.inner
{
   width:700px;
  float:left;
  position:relative;

}


div.content
{  width:700px;
   float:left;
   position:relative;

}
span.std
{
  width:500px;
  float:left;
  position:relative;
}
span.std span.std-content
{
   float:left;
   width:250px;
   position:relative;


 }

代码

<div class="inner">
    <div class="content">
    <span class="std">
    <span class="std-content">
       Column 1 Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1Column 1</p>

    </span>
    <span class="std-content">
          Column 2


    </span>
    </span>

    </div>
</div>

</div>

Answer 1

这将适用于所有浏览器。

演示：http: //jsfiddle.net/ThinkingStiff/K9bjX/

输出

HTML

<div id="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
<div>​

CSS

#grid {
    width: 300px;
    height: 300px;        
}

.cell {
    outline: 1px solid red;
    float: left;
    height: 100px;
    width: 100px;    
}