창을 4 개로 분할하지만 한 장의 그림을 제거하면 레이아웃이 변경됩니다.

Question

나는 4 등분하여 창을 나누고 싶다. 각 부분에서 나는 가로 세로로 정렬 된 그림을 원한다. 조금은 here이다.

문제는 내가 사진 중 하나를 제거 할 때, 나는 here

Answer 1

피들 : 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;를 추가합니다. 이 속성은 요소를 보이지 않게하지만 자리를 "예약 됨"으로 유지합니다.

바이올린 : 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을 넣어 다른 사진하지 않을 것입니다