Jump to content
  • 0

Обтекание элементов


ELBegemotos
 Share

Question

Добрый день,уважаемые форумчане!
При верстке макета обнаружил проблемку: дело в том,что новости на сайте разной высоты и никак не могу добиться того,чтобы блоки обтекали друг друга ,а не оставляли пустое место.
Прилагаю скрин,там есть новости,и я добиваюсь такого же обтекания,помогите,знает кто,0где можно достать информацию по данному поводу?

5a887267f551.jpg

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Вас интересует многоколоночная вёрстка. Введите «css multiple columns» в Google. и прочитайте как сделать. Сразу предупреждаю, что в ИЕ работает только начиная с 10 версии, но возможно есть полифилл на JS.

  • Like 1
Link to comment
Share on other sites

  • 0

Вас интересует многоколоночная вёрстка. Введите «css multiple columns» в Google. и прочитайте как сделать. Сразу предупреждаю, что в ИЕ работает только начиная с 10 версии, но возможно есть полифилл на JS.

Спасибо большое,очень полезная информация и свойство,но появилась еще одна проблема,прописал,разбил на три колонки,установил разрывы и тд,но вот переводит новости в столбы не последовательно,т.е должно быть:

1 2 3

4 5 6

7 8 9

А при задании свойства column,разбивается все:

147

258

369

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

Спасибо заранее!

Link to comment
Share on other sites

  • 0

Средствами CSS никак не исправить. Можно при помощи JS раскидывать блоки по контейнерам. При таком подходе даже колонки не понадобятся, однако, если таких блоком будет много на странице, то будет подтормаживать т.к. скрипт будет перестраивать DOM.

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