Jump to content
  • 0

Проблема с расположением обтекающих элементов


Adlaran
 Share

Question

Требуется реализовать вот такую вот штуку:

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

1998497.jpg

1996449.jpg

Нужно, чтоб либо все оставшиеся в строке блоки равномерно располагались в строке (можно, чтоб между ними был отступ), либо все блоки центрировались. Первый случай хорошо реализован в ЯндексКартинках (1->2->3), но к сожалению ни первое, ни второе решения с использованием только HTML и CSS я нормально реализовать не смог. Просьба помочь как-нибудь.

Edited by Adlaran
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
На яндекс.картинках это сделано таблицей и шаманским ява-скриптом

Причем таблица в этом случае не обязательное условие, а вот без js не обойтись. В CSS ведь нет возможности реагировать на события в окне.

Вот пример как можно это реализовать при помощи простого скрипта.

Link to comment
Share on other sites

  • 0
На яндекс.картинках это сделано таблицей и шаманским ява-скриптом

Это понятно, я Яндекс привёл как пример того, как всё должно выглядеть на экране монитора.

Вот пример как можно это реализовать при помощи простого скрипта.

Спасибо большое, буду разбираться.

Edited by Adlaran
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy