ウィンドウを4分割しますが、1つの画像を削除するとレイアウトが変更されます。

Question

窓を4等分したいと思います。それぞれの部分では、どちらも垂直方向と水平方向に整列した画像が必要です。ちょっとhereのようです。

問題は、私は絵のいずれかを削除すると、私はhere

Answer 1

Fiddle：http://jsfiddle.net/TFCM4/8/

コンテナ（#bgs）内に4つのdivを作成し、要素に説明的なクラス名を追加します。

関連する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;を追加します。このプロパティは、要素を非表示にしますが、スポットを "予約済み"にします。

フィドル：代わりに、2つのテーブルを使用してのhttp://jsfiddle.net/TFCM4/2/

、あなたは一つのテーブルにテーブルをマージし、さらにいじりせずに所望の結果を達成することができます。 フィドル：http://jsfiddle.net/TFCM4/3/

HTML構造：

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

Answer 2

使用したテーブルのように、その削除画像のスペースを使用し、TDにIMGを置くために他の画像にしたくないということです