html + css изменение дизайна стола

Question

На домашней странице моего сайта я хотел бы отобразить 12 изображений одинакового размера в сетке 3 на 4. Я бы хотел избежать таблиц, потому что в CSS у меня есть 2 медиа-запроса, которые «меняют» макет с 3 на 4 на 2 на 6 и на 1 на 12, когда экран недостаточно большой, но если есть способ «менять макет» со столами, я полностью в порядке. Проблема, с которой я сталкиваюсь, заключается в том, что когда я показываю не 12, а 11 изображений, последний не центрируется.

Код первых 3 дивы выглядит следующим образом (остальные 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; 
} 

Любые предложения? Пожалуйста, дайте мне знать, если вам нужна дополнительная информация!

Answer 1

Если вы хотите, чтобы достичь такой гибкой компоновки, вы можете посмотреть в использовании макета сетки, предлагаемом в популярном рамках CSS под названием Bootstrap: http://getbootstrap.com/css/#grid-options

После того, как вы включили Bootstrap, используя что-то вроде:

<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-. Они хорошо документированы.

Надеюсь, что это поможет.

Answer 2

Вот чувствительная сетка изображений с максимальной шириной. Все изображения центрированы. Надеюсь, вы сочтете это полезным!

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