3

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

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

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

4

3 回答 3

6

这是 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的建议，与<ul>

于 2013-10-10T12:37:40.380 回答
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;
}

在这里演示

于 2013-10-10T12:23:46.640 回答
0

用于%尺寸和float图像：

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

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

于 2013-10-10T12:30:45.940 回答