Переполнение изображения в следующей строке

Question

У меня есть следующий html:

<div id="thumbs">
   ...8 image tags width and height of images 100 x 100px
</div>

Связанный CSS:

#thumbs
    {
        overflow:hidden;    
        float:left; 
        position:relative;
        background-color:white;
        height:100px;
        width:100%;
    }

#thumbs img 
    {       
        padding:5px;    
    }

Когда я уменьшаю разрешение до минимального значения -800 x 600, последнее изображение-img8 перепрыгивает на следующую строку.Я бы хотел, чтобы все изображения отображались в одной строке.Это возможно?

Answer 1

У вас есть 8 изображений шириной 100 пикселей каждое.Ширина окна составляет 800 пикселей.У вас также есть отступы 5 пикселей на каждом изображении, что делает всю структуру шириной 880 пикселей.Уменьшите размер каждого изображения до 90px, и все будет хорошо.Также примите во внимание полосу прокрутки, если будет прокрутка, которая является еще 20-30px.

Answer 2

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

Ваша проблема в том, что вы пытаетесь поместить 880px в пространство 800px, это 800px для изображений, затем добавьте 10px для каждого изображения в div, что дает дополнительные 80.

Основное решение, которое я бы использовал, - это вставить медиа-запрос, например

@media screen and (max-width: 810px) {
     #thumbs img {
     padding: 3;
     height:80px;
     width:80px
  }
}

Что это за поговорка, если ширина окна меньше 810 пикселей, тогда примените этот стиль к элементам. Почему 810px? Быть в безопасности в принципе.

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

Я надеюсь, что это полезно для вас.

Answer 3

вы пытались установить минимальную ширину для контейнера

#thumbs {min-width: 880px;}

• ширина, полученная из изображений шириной 8 x 100 пикселей с отступом 10 пикселей (5 пикселей слева + 5 пикселей справа) каждое.