html + css table design change

Question

In der Homepage meiner Website möchte ich 12 gleich große Bilder in einem 3 x 4 Raster darstellen. Ich möchte Tabellen vermeiden, weil ich im CSS zwei Medienabfragen habe, die das Layout von 3 zu 4 auf 2 zu 6 "ändern" und zu 1 zu 12, wenn der Bildschirm nicht groß genug ist, aber wenn es einen Weg gibt "Layout ändern" mit Tabellen bin ich total ok damit. Das Problem, das ich habe, ist, dass, wenn ich nicht 12, sondern 11 Bilder zeige, der letzte nicht zentriert ist.

Der Code der ersten 3 divs ist wie folgt (die anderen 9 ziemlich gleich sind):

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

Irgendwelche Vorschläge? Bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen!

Answer 1

Wenn Sie solche ansprechende Layout erzielen möchten, können Sie in einem beliebten CSS-Framework aussehen wollen genannt Bootstrap bot die Grid-Layout in Verwendung: http://getbootstrap.com/css/#grid-options

Sobald Sie Bootstrap enthalten, wie etwas mit:

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

sollte es Ihnen ermöglichen, Ihren Zweck zu erreichen, ohne jedes Div manuell anzupassen. Achten Sie darauf, auch in .col-xs-, .col-sm-, .col-md- und .col-lg- zu schauen. Sie sind gut dokumentiert.

Hoffe, dass hilft.

Answer 2

Hier ist ein reaktionsfähiges Bildraster mit einer maximalen Breite. Alle Bilder sind zentriert. Ich hoffe, Sie finden es nützlich!

.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>