한 줄에 3 개의 div가있는 경우 반응 형 (새 줄로 이동하는 대신 div 크기 변경)

Question

한 줄에 3 개의 div/이미지 (관리자에게는 div가 있고 결과 페이지에는 이미지가 있음)가 있고 그 중 8 개 이상이 있습니다./less (동적).

필자는 열 수를 사용했으나 정상적으로 작동했지만 몇 가지 문제가 있습니다.

1. IE7 용으로 최적화해야하므로 첫 번째 지원입니다.
2. 두 번째 방법은 이미지를 표시하는 방법입니다 (위에서 아래로, 왼쪽에서 오른쪽으로).
3. 4, 7, 10, 13, 16 등의 이미지가있을 때 세 번째 문제가 발생합니다.

플로트를 사용하고 싶지 않습니다. 응답 성을 가질 수있는 방법이 있습니까? 그래서 기본적으로 XXXpx의 최대 크기를 가진 div는 페이지의 크기를 조정할 때 다른 줄로 떨어지는 대신 크기가 조정됩니까? http://jsfiddle.net/xabxt3re/1/

... 

때로는 못해 그냥 페이지를 닫고 다시 열, 오른쪽 크기를 조정할 수 있습니다. 일해야한다. 이상한 JSFiddle 문제. 또한 거기를 클릭하면 끝에 새로운 이미지가 추가되므로 피하려는 동작을 관찰 할 수 있습니다.

기본적으로 한 줄에 3 개의 divs/images가있는 방법이 있습니까? 브라우저 창 크기가 충분하지 않고 다른 줄로 떨어지는 경우 크기가 조정됩니다. 또는 열 개수가 이미지를 표시하는 순서를 수정하고 처음 두 열을 2 개의 이미지로 채우고 이미지가 균등하게 퍼지지 않는 방법을 수정 하시겠습니까?

Ps .: 누군가 내 질문에 투표를했다면, 왜 저에게 말해 줄 수 있습니까? 그래서 그것을 향상시키고 다음 번에 배울 수 있습니까? 정말 짜증이납니다. 나는 모든 세부 사항과 심지어 내가 가지고있는 코드를 제공했다.

수정 제안을 보내 주셔서 감사합니다. 링크 뒤에 공간을 추가했지만 하나를 만들려면 2 칸을 추가해야한다는 사실을 잊어 버렸습니다.

Answer 1

에서 .main 클래스의 변경 시도 :

나는 테이블로 전환해야했고 작동합니다 ... 얼마나 놀랍습니까?

그래서 여기에 새로운 코드를 추가하기 위해 JS로 전체 코드가 있습니다.

http://jsfiddle.net/xabxt3re/6/

HTML

<table class='table'><tr> 
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td> 
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td> 
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td> 
    </tr><tr> 
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td> 
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td> 
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td> 
    </tr><tr> 
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td> 
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td> 
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td> 
</tr></table> 

CSS

.table{ 
    max-width: 320px; 
    margin: 0 auto;  
} 
img { 
    max-width: 100%; 
    height: auto; 
} 

JS

,

var NewContent2 = "<td><img src='https://www.hojko.com/download/file.php?avatar=5439_1294832739.jpg'></td>"; 
$(".table").click(function() { 
    $page = $(this).children("tbody"); 
    if ($(this).find("td").length % 3 == 0){ 
     $page.append("</tr><tr>"); 
    } 
    $page.append(NewContent2); 
}); 

Answer 2

jsfiddle Demo을 살펴보세요. 그것은 IE8까지 작동해야합니다. IE7의 경우이 블로그 게시물을 살펴보십시오. http://uncorkedstudios.com/blog/how-to-fix-the-ie7-and-inlineblock-css-bug

그래서 시도 모든 옵션 후에, 나는이 동의했다의 width 확인 jsfiddle