Попытка упорядочить изображения с помощью css

Вот код, который я использую до сих пор. У меня есть 6 изображений, которые я пытаюсь организовать и сделать отзывчивыми.

Идея такая
изображение-пробел-изображение

изображение — — — — — пустое пространство — — — — — изображение

 image -blank space - image

Когда я сжимаю страницу, они не складываются равномерно друг на друга. Пространства должны уйти, поэтому все, что у меня есть, это 6 изображений друг на друге. CSS ниже с последующим html

.row:after {
  content: "";
  clear: both;
  display: table;
}
/** North Scottsdale */

.nsdl {
  float: left;
  margin: 0 175px;
  padding: 0 0px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}
/** break1 */

.break1 {
  float: left;
  margin: 0px;
  padding: 0px;
  width: 95px;
  height: 200px;
  border: 3px solid white;
}
/** Scottsdale */

.sdl {
  float: left;
  margin: 0px;
  padding: 10px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}
/** Tempe */

.tmpe {
  float: left;
  margin: 0 35px;
  padding: 10 10px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}
/** break2 */

.break2 {
  float: left;
  margin: 10px;
  padding: 10px;
  width: 475px;
  height: 200px;
  border: 3px solid white;
}
/** Downtown */

.dtown {
  float: left;
  margin: 10px;
  padding: 10px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}
/** West Side */

.wside {
  float: left;
  margin: 0 175px;
  padding: 0 0px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}
/** break1 */

.break3 {
  float: left;
  margin: 0px;
  padding: 0px;
  width: 95px;
  height: 200px;
  border: 3px solid white;
}
/** UPTOWN */

.utown {
  float: left;
  margin: 0 120px;
  padding: 10 10px;
  width: 300px;
  height: 200px;
  border: 3px solid white;
  background-image: url("/images/dphotos/test2a.png");
}
<div class="w3-container">
  <div class="row">
    <div class="left">
      <div class="nsdl" style="text-align: center;">
        <h2> NORTH SCOTTSDALE</h2>
      </div>
    </div>
    <div class="center"> </div>
    <div class="right">
      <div class="sdl" style="text-align: center;">
        <h2>SCOTTSDALE</h2>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="left">
      <div class="tmpe" style="text-align: center;">
        <h2>TEMPE</h2>
      </div>
    </div>
    <div class="center"> </div>
    <div class="right">
      <div class="dtown" style="text-align: center;">
        <h2>DOWNTOWN</h2>
      </div>
    </div>
    <div class="left">
      <div class="wside" style="text-align: center;">
        <h2>WEST SIDE</h2>
      </div>
    </div>
    <div class="center"> </div>
    <div class="right">
      <div class="utown" style="text-align: center;">
        <h2>UPTOWN</h2>
      </div>
    </div>
  </div>
</div>

1 ответ

  1. Я бы предложил взглянуть на ряд фреймворков, таких как Bootstrap, Skeleton и Zurb Foundation, и использовать их компоненты CSS grid. Посмотрите, как они управляют размером различных областей страниц с помощью медиа-запросов, используя мобильный первый подход.

    Вы можете определенно свернуть ваше собственное решение тоже. Вот пример.

    <div class="img-group">
      <div class="img-holder">
        <img src="http://placehold.it/300x300?text=1">  
      </div>
      <div class="img-holder">
        <img src="http://placehold.it/300x300?text=2"> 
      </div>
      <div class="img-holder">
        <img src="http://placehold.it/300x300?text=3"> 
      </div>
      <div class="img-holder">
        <img src="http://placehold.it/300x300?text=4"> 
      </div>
      <div class="img-holder">
        <img src="http://placehold.it/300x300?text=5"> 
      </div>
      <div class="img-holder">
        <img src="http://placehold.it/300x300?text=6"> 
      </div>
      <div class="img-holder">
        <img src="http://placehold.it/300x300?text=7"> 
      </div>
      <div class="img-holder">
        <img src="http://placehold.it/300x300?text=8"> 
      </div>
      <div class="img-holder">
        <img src="http://placehold.it/300x300?text=9"> 
      </div>
    </div>
    
    .img-group img {
      display: block;
      max-width: 100%;
    }
    
    .img-holder {
      float: left;
      width: 50%;
    }
    
    @media ( min-width: 448px ) {
      .img-holder {
        width: 33.333%;
        padding: 0.75%;
      }
    }
    
    @media ( min-width: 779px ) {
      .img-holder {
        box-sizing: border-box;
        width: 25%;
        padding: 2%;
      }
    }
    

    Демо JSFiddle .

    Сначала вы делаете ваши изображения отзывчивыми. Самая простая версия этого-установить их на display: block;and max-width: 100%;. Установка максимальной ширины означает, что они будут пытаться занять ширину родительского элемента, пока они не превышают их собственную внутреннюю ширину. Например, если родительский элемент 700pxширок, а изображение 600pxшироко, оно не будет растягиваться, чтобы соответствовать 700pxпространству. Он остановится на 600px.

    Теперь вы размещаете изображения в элементах контейнера, которыми будете управлять с помощью запросов мультимедиа . Используйте процентные ширины (т. е.width: 25%;), чтобы они оставались хорошими и текучими.

    Вам может быть интересно, что box-sizing: border-box;делает. Он говорит, что paddingэто должно быть включено в ваше widthопределение. Обычно, если у вас есть width: 25%; padding: 1%;общая ширина элемента будет 27%как 1% + 25% + 1% = 27%.