将 9 个图像平铺在一个 div 中的一个正方形中......当前的方式？ [关闭]答案

【问题标题】：Tiling 9 images in a square in a div... Current way? [closed]将 9 个图像平铺在一个 div 中的一个正方形中......当前的方式？ [关闭]
【发布时间】：2013-10-10 12:10:32
【问题描述】：

我正在尝试在 3x3 网格中显示 9 个方形图像。我希望能够拉伸整个 3x3 正方形的边界框，从而拉伸每个图块。

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

请善待 - 我上次做前端开发时，桌子很流行，而且还不是 Y2K。

【问题讨论】：

我建议使用带有 9 个
元素的

【解决方案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>

【讨论】：

我认为这是三者中最好的解决方案，但你应该使用
感谢您的建议，我放了第二个基于
的工作演示
padding-bottom:30% 是我所缺少的 - 虽然不知道那是什么......但即使设置 width:33% 似乎也会把事情搞砸，或者忽略 padding-bottom
我在所有尺寸的1% 上都有一个margin，这就是我设置.square width on 30% 的原因，所以当你设置在33% 上时，它并没有那么疯狂以至于它搞砸了。 .

【解决方案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

【讨论】：

好吧，我确实说过，改变整体的宽度和高度。我猜所有的图像都会匹配宽度和高度。
嗯，所以使用行方法，有没有一种方法可以自动适应而无需设置容器像素大小？（见上面的解决方案）

【解决方案3】：

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

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

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

【讨论】：