html + css表格設計更改

在我的網站的主頁，我想顯示12張圖片，大小相同，在3乘4格。我想避免使用表格，因爲在CSS中，我有兩個媒體查詢，當屏幕不夠大時，將佈局從「3」改爲「2」6，然後改爲「1」12，但如果有方法用表格「改變佈局」我完全可以接受它。我遇到的問題是，當我顯示的不是12張，而是11張圖片時，最後一張沒有居中。html + css表格設計更改

第一3周的div的代碼如下（其他9是幾乎相同的）：

.divThumb1{ 
    float: left; 
    width: 31%; 
    max-width: 288px; 
    margin: 0%; 
    position: relative; 
    margin-top: 15px; 
} 
.divThumb2{ 
    margin:0 auto; 
    display:inline-block; 
    width: 31%; 
    max-width: 288px; 
    margin: 0%; 
    position: relative; 
    margin-top: 15px; 
} 
.divThumb3{ 
    float: right; 
    width: 31%; 
    max-width: 288px; 
    margin: 0%; 
    position: relative; 
    margin-top: 15px; 
}

任何建議？請讓我知道你是否需要更多的信息！

來源

2016-09-25 overkill

您可以編寫完整的代碼？我無法理解你的問題。 –

如果要達到這樣的響應佈局，你可能要考慮使用在一個名爲引導流行的CSS框架所提供的網格佈局：http://getbootstrap.com/css/#grid-options

一旦你包括引導，使用類似：

<div class="row"> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    ... 
</div>

應該允許您實現您的目的，而無需手動定製每個div。請務必查看.col-xs-,.col-sm-,.col-md-和.col-lg-。他們有據可查。

希望有所幫助。

來源

2016-09-25 22:24:16

這是一個最大寬度的響應圖像網格。所有圖像都居中。希望對你有幫助！

.imageGrid { 
 
    display: block; 
 
    margin: 0 auto; 
 
    max-width: 800px; 
 
    text-align: center; 
 
    font-size: 0; 
 
    line-height: 0; 
 
} 
 

 
.imageGrid * { 
 
    font-size: 16px; 
 
    line-height: 21px; 
 
} 
 

 
.imageGrid > img { 
 
    display: inline-block; 
 
    width: 31%; 
 
    margin: 1%; 
 
    background-color: gray; 
 
}

<div class="imageGrid"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
</div>

來源

2016-09-25 22:56:03 Aloso

html + css表格設計更改

回答

相關問題