<img> 창 너비에 따라 행이 배치됩니다.

동일한 크기의 이미지 세트가 있습니다.
표와 같은 구조로 표시하고 싶지만 사용자의 브라우저의 너비에 따라 "열"의 수를 변경하려면 모든 구조가 가운데에 배치되어야합니다.
나는 무엇을 생각해 냈습니다 : http://jsfiddle.net/MHva2/3/.<img> 창 너비에 따라 행이 배치됩니다.

.container { 
    display: table; 
    margin: auto; 
} 

.element { 
    width: 200px; 
    height: 200px; 
} 

<div class = "container"> 
    <img class = "element" /> 
    <img class = "element" /> 
</div>

모든 이미지를 단일 행에 배치 할 수있는 경우에만 작동합니다.
줄이 "끊어지면"container 요소는 다음과 같이 모든 무료 공간을 사용합니다 : http://jsfiddle.net/MHva2/5/.
이 상황에서 콘텐츠 주위를 흐르게하는 방법이 있습니까?

업데이트 :
설명해 드리겠습니다.
내가 원하는 것은 브라우저가 이미지를 자동으로 컨테이너에 넣는 것이다.이 컨테이너는 테이블 셀처럼 보일 것이고, 열 수는 floor(window_width/image_width)과 같다.
이미지 수는 다를 수 있으며 전체 테이블과 같은 구조가 중앙에 위치해야합니다.
그림을 그려서 동일한 수의 이미지를 가진 동일한 페이지가 다른 크기의 윈도우 내부에서 어떻게 보일지 보여줍니다 : http://rghost.net/44024115.view.

출처

2013-02-22 user2052437

질문이 명확하지 않습니다. 그것을 자세히 설명해주세요. –

@milind_developer가 정확합니다. 귀하의 질문에 대한 표현이 잘못되어 더 자세한 내용을 분명히 사용할 수 있습니다.

내가 수집 한 것부터 사용자의 뷰포트 크기에 맞게 확장/축소 할 수있는 유연한 열을 원하십니까?

당신은 같은 열 클래스를 만들 수 있습니다 이렇게하려면 :

.example-column { 
    float: left; 
}

그런 다음 열을 내부에 원하는대로 요소 둘러싸 :

<body> 
    <div class="wrapper"> 
     <div class="container"> 
      <div class="example-column"> 
       <div class="element"></div> 
       <div class="element"></div> 
       <div class="element"></div> 
      </div> 
      <div class="example-column"> 
       <div class="element"></div> 
       <div class="element"></div> 
       <div class="element"></div> 
      </div> 
     </div> 
    </div> 
</body>

플로트 스타일의 유체 레이아웃의 기본 수준을 제공, 그러나 미디어 쿼리를 사용하여 열의 동작에 대해 큰 정확성을 행사할 수도 있습니다 (예 :

@media only screen and (max-width: 500px) { 
    .example-column { 
     float: none; 
    } 
}

(당신이 더 많은 제어를 사용 ID의 원하는 경우)이 하나의 열 레이아웃을 사용하는 500 픽셀에서 아무것도 강제 것이다.

바이올린 : http://jsfiddle.net/MHva2/8/

출처

2013-02-22 07:38:08 danwild

<img> 창 너비에 따라 행이 배치됩니다.

답변

관련 문제