3 × 3 の表示
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
.grid3x3 {
display:table;
height:100%;
width:100%;
}
.grid3x3 > div {
display:table-row;
width:100%;
}
.grid3x3 > div:first-child,
.grid3x3 > div:last-child {
height: 100px;
}
.grid3x3 > div > div {
display:table-cell;
}
.grid3x3 > div > div:first-child,
.grid3x3 > div > div:last-child {
width:100px;
}
div {
outline: 1px solid orange;
}
</style>
<div class="grid3x3">
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
HTML
<div class="table"> <div class="row"> <div class="cell1">row 1</div> <div class="cell2"></div> <div class="cell3"></div> </div> <div class="row"> <div class="cell1">row 2</div> <div class="cell2"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /> </div> <div class="cell3"></div> </div> <div class="row"> <div class="cell1">row 3</div> <div class="cell2"></div> <div class="cell3"></div> </div> </div>
CSS
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.table {
display:table;
width:100%;
height:100%;
border:1px solid #000;
}
.row {
display:table-row;
height:100%;
}
.cell1, .cell2, .cell3 {
display:table-cell;
width:33%;
height:100%;
border:1px solid #CCC;
}
.cell2 > img {
width:100%;
height:auto;
}