Jump to content
  • 0

Подскажите лучший вариант верстки такого


USF
 Share

Question

Необходимо сверстать ряд блоков друг под другом.

Все как у самых простых div'ов, но только занимать они должны по горизонтали не 100% места, а определенное минимальное значение и потом расширяться по мере необходимости.

 

Вот ищу самый "красивый", с точки зрения кода, метод.

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Верстайте дивами и им указывайте вашу нужную длину,

 

 

потом расширяться по мере необходимости.

 

Если читать оппост, то вопросы отпадают сами собой :)

 

 

Все предельно просто. Есть обычные дивы, друг под другом. Изначально они занимают 100% места по горизонтали. А мне нужно определенное минимальное. Но без float'ов.

Edited by USF
Link to comment
Share on other sites

  • 0
Вы пробовать хоть начинали?
 

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

 

Прототипы:

http://codepen.io/usf/pen/arEsj

вот 2 варианта, которые мне наиболее нравятся.

Второй хорош тем, что нет вложенного элемента, но флоаты не люблю, а первый вроде всем хорош, разве что лишний вложенный элемент. Но может кто-то знает другой способ.

Link to comment
Share on other sites

  • 0

Первый лучше.

И не надо бояться оберток. Они часто очень помогают в дальнейшем, и с ними проще бывает. 

Часто лучше лишний раз обернуть и дать отдельный класс блоку, чем не обернуть и оставить безымянным. Но это разные случаи бывают.

  • Like 1
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