Выравнивание изображений по горизонтали с помощью html

Question

Я создал 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 
} 

он показывает мне фотографии, как это:

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

Answer 1

просто использовать Flexbox

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

Answer 2

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

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

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

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

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

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

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