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

工作Fiddle

关于 danrhul 的建议 DEMO 与<ul>

Answer 2

这样的东西？将图像放入盒装内并更改整个容器大小。（它不会自动调整，你需要自己设置容器的大小）只是想把它放在这里，因为我相信你可以使用它。

<强> HTML：

<div id="box">
    <div class="row">
        <div class="boxes">Box 1</div>
        <div class="boxes">Box 2</div>
        <div class="boxes">Box 3</div>
    </div>
    <div class="row">
        <div class="boxes">Box 4</div>
        <div class="boxes">Box 5</div>
        <div class="boxes">Box 6</div>
    </div>
    <div class="row">
        <div class="boxes">Box 7</div>
        <div class="boxes">Box 8</div>
        <div class="boxes">Box 9</div>
    </div>
</div>

<强> CSS：

#box {
    width: 400px;
    height: 400px;
    border: #000000 solid 1px;
}
.boxes {
    width: 100%;
    height: 100%; 
    border: #000000 solid 1px;
    float: left;
    text-align: center;
}
.row {
    width: 33.3%;
    height: 33%;    
    float: left;
}

DEMO HERE

Answer 3

对尺寸使用%，对图像使用float：

img {
    display: block;
    float: left; 
    width: 33.3%;
    height: 33.3%; 
}

检查：http://jsfiddle.net/xSEnd/1/

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

3 个答案: