<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

你的問題不清楚。請詳細說明 – 2013-02-22 06:24:58

@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; 
    } 
}

這將強制500px以下的任何內容使用一個列布局（如果您想要更大的控件使用ID）。

小提琴：http://jsfiddle.net/MHva2/8/

來源

2013-02-22 07:38:08 danwild

<img>根據窗口的寬度放置在一行中

回答

相關問題