Блог

Я создал HTML-страницу и css, и я интегрировал изображения, в которых я хотел бы выровнять изображения по горизонтали до тех пор, пока страница не станет горизонтальной, а затем обернуть, чтобы заполнить страницу изображениями. Я пытался с этим кодом:

 <section class="main clearfix" style="display:inline;">
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work3.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work5.jpg" class="media" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work5.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work6.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work2.jpg" class="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work3.jpg" class="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>

</section>
  

файл css :

 .work {
  display: inline;
  float: auto;
}
.work img {
  width: 10%;
  height: 200px;
  margin-left: -2px
}
  

он показывает мне изображения, подобные этому:

Моя проблема в том, что это делает меня пустым местом справа, а затем возвращается к строке.

просто используйте flexbox

 .main{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
  

Помимо решения Мартина,

Если вас беспокоит соотношение размеров изображений, flex может быть лучшим решением, или,

Используется object-fit: cover в img , но это не поддерживается IE.

Используется background-size: cover; для фоновых изображений, но ужасное решение для SEO.

Используйте table display и применяйте overflow: hidden; в .work div, но, ужасно для отзывчивости.

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

Учитывая отображение изображений, flex было бы лучшим решением в таком случае.