divで横並びのセルを作る
divでテーブルのような横並びのセルを作る方法です。
実際のテーブルのような精細なことはできませんが、高さのそろった横並びのセルが自由に作れます。
CSSスタイルとしては display:table; display:table-cell;を使用するのですが、IEでは問題ないのですが、chromeではスタイルシートの中に書き込んでも作動しませんでした。
したがって、<body>の最初に次を記述。
実際の使用は、<! =========================div-table=========================== > <style type="text/css"> .div-table { margin:1em 0; padding:1em; display:table; border-collapse:collapse; border-spacing:5; background:whight; vertical-align:middle; width:100%; } .div-table div { padding:1em; display:table-cell; vertical-align:middle; } .div-table div.cell3 {width:30%;} .div-table div.cell4 {width:40%;} .div-table div.cell5 {width:50%;} .div-table div.cell6 {width:60%;} .div-table div.cell7 {width:70%;} </style>
というような使い方になります。<div class="div-table"> <div class="cell3">~~~~</div> <div class="cell5">^^^^</div> </div>