html - 将窗口分成 4 个部分，但删除一张图片会更改布局。

Question

我想将窗口分成 4 个相等的部分。在每个部分我都想要一张垂直和水平对齐的图片，有点像 here .

问题是，当我删除其中一张图片时，我不想让其他图片使用已删除图片的空间，例如 here

Answer 1

fiddle :http://jsfiddle.net/TFCM4/8/

在容器内创建 4 个 div (#bgs)，并向元素添加描述性类名。

相关 CSS:

html, body { /* Prevent "borders" from appearing */
    padding: 0;
    margin: 0;
}
#bgs { /* Let the container fill the whole window */
    width: 100%;
    height: 100%;
}
#bgs > div { /* Set the height and width of each div to 50% */
    width: 50%;
    height: 50%;
}
.right {float: right;} /* Align to the right */
.left {float:left;} /* Align to the left */
img {
    display: block;
    height: 100%; /* Let the image stretch/shrink when necessary*/
    width: 100%;
}

HTML:

<div id="bgs">
    <div class="top left">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
    <div class="top right">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
    <div class="bottom left">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
    <div class="bottom right">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
</div>

我只使用了 left 和 right 类名。添加了 top 和 bottom 以使源代码看起来更具可读性。

---

以前的(表格)方法:
添加 visiblity:hidden; 到应该隐藏的图像。此属性使元素不可见，但保留位置“保留”。

fiddle :http://jsfiddle.net/TFCM4/2/

您可以将这些表合并为一个表，而不是使用两个表，并在不进一步困惑的情况下获得所需的结果。 fiddle :http://jsfiddle.net/TFCM4/3/

HTML 结构:

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>