css - css で float を使用して 3 行 3 列の行列を作成する

Question

重複の可能性:
css で float を使用してテーブル レイアウトを作成する方法

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