在一个正方形中平铺9个图像...当前的方式？

Question

我试图在3x3网格中显示9个方形图像.我希望能够拉伸整个3x3方块的边界框,从而拉伸每个瓷砖.

我的解决方案将涉及表 - 我想现在已经避开过了？在现代和当代浏览器中,这样做的正确方法是什么？

请善待 - 我最后一次做前端开发,桌子时尚,而且不是Y2K.

Answer 1

这是一个3x3流体方块的例子.当高度或宽度改变时,这会改变.

<div id="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

CSS:

html, body{
    width:100%; 
    width:100%; 
    margin:0; 
    padding:0;
}

#container {
    width:100%; 
    height:100%;
}
.square{ 
    border:1px solid #000;         
    padding-bottom: 30%; 
    height: 0;
    width:30%; 
    margin:1%; 
    float:left; 
    display:block;
}

还有一个工作小提琴

对建议danrhul工作DEMO带<ul>