За последние 24 часа нас посетили 21700 программистов и 1030 роботов. Сейчас ищут 802 программиста ...

Как разместить элементы inline, если они суммарно шире, чем их родительский объект?

Тема в разделе "HTML и CSS", создана пользователем Alex Mavpa, 20 июн 2021.

Метки:
  1. Alex Mavpa

    Alex Mavpa Новичок

    С нами с:
    20 июн 2021
    Сообщения:
    1
    Симпатии:
    0
    Доброго времени суток, у меня имеется несколько (2,3,4 или более) элементов внутри div, выглядит это вот так:

    <div id="mydiv" style="overflow:hidden;">
    <a href="#" style="display:inline;"><img src="https://i1.wp.com/rockislandvillage.com/wp-content/uploads/2017/03/fpo400x300.png" alt="1" ></a>
    <a href="#" style="display:inline;"><img src="https://i1.wp.com/rockislandvillage.com/wp-content/uploads/2017/03/fpo400x300.png" alt="2" ></a>
    </div>

    Как видно, был применен "display:inline;" к внутренним элементам, а также "overflow:hidden;" к родительскому div, при этом если общая ширина элементов больше, чем ширина этого div, то элементы выстраиваются друг под другом, а не в линию. А мне надо всегда в линию, а если не помещаются, то пусть непомещаемая часть будет скрыта, то есть hidden

    Вот здесь пример (можно менять размер окна с результатом и видеть этот эффект) - https://jsfiddle.net/672nacph/. Как решить данную задачу в css?
     
  2. roboformation

    roboformation Активный пользователь

    С нами с:
    30 авг 2020
    Сообщения:
    162
    Симпатии:
    40
    white-space: nowrap; для блока-родителя