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>
というような使い方になります。