Jump to content
  • 0

Список в несколько колонок


Nadyu
 Share

Question

Хочу сделать несколько блоков стоящих рядом, количество заранее не известно. Они должны быть отцентрованы.

То есть то, что выделено зеленым, было одинаковой ширины:

ec0b3ec7c32dt.jpg

(линк по превью переводит просто на большое изображение, а не на радикал))

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

a8e94a14a907t.jpg

И не должно быть так, что если количество блоков не кратно числу, что влезает в строку, то в нижней строке все уползает по центру.

7ba013de5112t.jpg

а было бы вот так:

0cd075a75a46t.jpg

У меня самой получился только не правильный вариант, что все становится по центру... Может кто-то сталкивался с подобным случаем?

Заранее мерси)

Edited by Nadyu
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Не совсем то. У меня блоки одинаковой высоты и ширины, поэтому не разъезжаются, как в том примере. Мне нужно именно отцентровать.

Ну дык сделай обёртку из инлайн-блока и её отцентрируй просто.

Link to comment
Share on other sites

  • 0

Не совсем то. У меня блоки одинаковой высоты и ширины, поэтому не разъезжаются, как в том примере. Мне нужно именно отцентровать.

Ну дык сделай обёртку из инлайн-блока и её отцентрируй просто.

http://jsfiddle.net/8FgFT/3/ получается, что общий блок раползается по всей ширине, а не равняется ширине контента.

Nadyu,

Отступы по бокам разной ширины?

Центральная колонка всегда кратна количеству блоков?

От чего зависит количество блоков в ряду?

Первые два вопроса не очень поняла, а последнее:

зависит от ширины, которую я задам маленькому блоку (она фиксирована, пиксели) и от ширины окна браузера (сколько влезет - столько и будет :) )

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