最佳答案
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>
关于html - 将窗口分成 4 个部分,但删除一张图片会更改布局。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7809092/