[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Дивы по центру
major28
Здравствуйте! У меня вот такая задача:
Есть n количество дивов с различной шириной, но с одинаковой высотой. Мне нужно, чтобы они шли друг за другом в ряд и чтобы весь этот ряд дивов был центрирован по горизонтали. Чтобы если я уберу различных 5 дивов, то они все равно шли друг за другом и все центрировались по центру. Зарание спасибо!



Спустя 17 минут, 25 секунд (22.06.2011 - 14:24) Winston написал(а):
Оно ?
Свернутый текст
<style>
.main{
border: 1px solid;
display:table;
width: 500px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.main div{
border: 1px solid;
width: 50px;
height: 50px;
display:inline-block;
}
</style>
<div
class="main">
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
</div>

Спустя 32 минуты, 2 секунды (22.06.2011 - 14:56) nugle написал(а):
один из простых способов, выставить display:block; и margin:0 auto;

Спустя 14 минут, 44 секунды (22.06.2011 - 15:10) killer8080 написал(а):
PHPprogramer
но есть нюанс, display:inline-block; не поддерживается "ослами" ниже 8-й версии, а IE7 ещё в строю smile.gif

Спустя 2 минуты, 22 секунды (22.06.2011 - 15:13) Winston написал(а):
killer8080
Спасибо, не знал.

Спустя 8 минут, 11 секунд (22.06.2011 - 15:21) killer8080 написал(а):
major28
по моему лучше сделать таблицей, красивого, кроссбраузерного решения на дивах не вижу.

Спустя 1 час, 15 минут, 46 секунд (22.06.2011 - 16:37) major28 написал(а):
вся фишка в том что мне нужно дивами так как, у меня ширина контейнера там где лежат блоки фиксированная и если вдруг у меня сумма ширин всех блоков будет больше ширины контейнера то блок съезжал на следующую строчку, а если сумма ширин была меньше, то они были по центру этого контейнера.

p.s. помимо display:inline-block есть еще варианты:?)))

Спустя 4 минуты, 36 секунд (22.06.2011 - 16:41) killer8080 написал(а):
Цитата (major28 @ 22.06.2011 - 16:37)
и если вдруг у меня сумма ширин всех блоков будет больше ширины контейнера то блок съезжал на следующую строчку

таблицы не съезжают wink.gif

Спустя 17 секунд (22.06.2011 - 16:42) Winston написал(а):
major28
Вот так тебе надо ?

Спустя 22 часа, 6 минут, 38 секунд (23.06.2011 - 14:48) major28 написал(а):
PHPprogramer, да)

Спустя 2 минуты, 35 секунд (23.06.2011 - 14:51) Winston написал(а):
Вот же код
Свернутый текст
<style>
.main{
border: 1px solid;
display:table;
width: 500px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.main div{
border: 1px solid;
width: 50px;
height: 50px;
display:inline-block;
margin: 2px;
}
</style>
<div
class="main">
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
</div>

Только в ишаке не пашет.

Спустя 3 минуты, 51 секунда (23.06.2011 - 14:55) killer8080 написал(а):
Цитата (PHPprogramer @ 23.06.2011 - 14:51)
Только в ишаке не пашет.

начиная с 8-го должен пахать rolleyes.gif

Спустя 1 минута, 56 секунд (23.06.2011 - 14:57) Winston написал(а):
Цитата (killer8080 @ 23.06.2011 - 14:55)
начиная с 8-го должен пахать

У меня 8.0 и не пашет.

Спустя 16 минут, 7 секунд (23.06.2011 - 15:13) inpost написал(а):
Чем не подходит:
<div align="center" style="height:XXXpx;">
<div
style="display:inline"></div>
...
<div style="clear:both"></div>
...следующий ряд...
</div>


Спустя 12 минут, 10 секунд (23.06.2011 - 15:25) killer8080 написал(а):
Цитата (PHPprogramer @ 23.06.2011 - 14:57)
У меня 8.0 и не пашет.

Хм, странно blink.gif значит htmlbook врёт, или "мелкомягкие" облажались rolleyes.gif

Спустя 1 минута, 25 секунд (23.06.2011 - 15:26) Winston написал(а):
Цитата (killer8080 @ 23.06.2011 - 15:25)
мелкомягкие облажались

Как всегда biggrin.gif

Спустя 3 часа, 41 минута, 17 секунд (23.06.2011 - 19:07) inpost написал(а):
killer8080
Не любите котов? ВЫ просто не умееете их готовить smile.gif

Спустя 10 минут, 2 секунды (23.06.2011 - 19:18) nugle написал(а):
major28
а чем не устроил мой вариант?

Спустя 27 минут, 51 секунда (23.06.2011 - 19:45) inpost написал(а):
nugle
тебе уже ответили, ИЕ не поддерживает block-inline

Спустя 16 минут, 3 секунды (23.06.2011 - 20:01) nugle написал(а):
inpost
может ты глянешь на мой пост, там видишь где нибудь inline-block?

Спустя 3 часа, 1 минута, 9 секунд (23.06.2011 - 23:03) inpost написал(а):
nugle
А почему у тебя вдруг будет работать по 5 блоков в ряд, если стоит display:block ?

Спустя 8 часов, 40 минут, 21 секунда (24.06.2011 - 07:43) nugle написал(а):
inpost
можно задать ограниченную длину блоков и поставить float:left;

Спустя 2 часа, 5 минут, 35 секунд (24.06.2011 - 09:49) killer8080 написал(а):
Цитата (inpost @ 23.06.2011 - 19:07)
killer8080
Не любите котов? ВЫ просто не умееете их готовить

А что IE есть за что любить rolleyes.gif
глючное, дырявое животное. Я им пользуюсь только для тестирования вёрстки, ну и на голой системе, чтоб скачать нормальный браузер smile.gif

Спустя 6 часов, 44 минуты, 28 секунд (24.06.2011 - 16:33) inpost написал(а):
killer8080
Есть, я же почему-то именно на нём по интернету лажу, а не перехожу на: хром, фф, опера, хотя установлены.
Поведение: ты говоришь, дайте мне пожалуйста текст, ИЕ отвечает "какой текст? Пока не скажешь, ничего не дам нормально!", а ФФ: "ну я думаю, он хотел именно зелёный текст и 14 шрифта, но забыл сказать, поэтому я дам ему такой"! Разница в том, что для ИЕ надо четко указывать, что ты хочешь, а для остального - нет. Поэтому ИЕ всегда быстрее работает, чем четче правила - тем лучше работа.
Я недавно даже слышал о HTML инспекторе для ИЕ, когда установлю себе - вообще шик будет, не прийдется даже ФФ при разработке открывать просто так.
1) ты делаешь верстку для самой последней версии хрома или ФФ, потом запускаешь в ИЕ, как думаешь, сколько багов ты там увидишь?
2) я делаю верстку для ИЕ, а потом запускаю в ФФ и Хроме, как думаешь, сколько багов я увижу?

Спустя 1 час, 6 минут, 52 секунды (24.06.2011 - 17:40) nugle написал(а):
inpost
тогда скажи мне пожалуйста, почему margin ие плохо воспринимает, background-position и т.п., inline-block. Этому есть объяснение?

Спустя 5 часов, 36 минут, 50 секунд (24.06.2011 - 23:17) inpost написал(а):
nugle
Скачай ФФ 1, или бету версию 0.1.
Новые версии нормально работают с inline-block.
inline-block -> начиная с 8-и работает. При этом за 2 года лишь в 2х местах где надо было использовать это, ничего сложного, если ты это сделаешь либо на <li>, либо через блоки(!). span block = div., span inline-block = div inline.
background-position: это что-то новое. Отлично работает даже в ИЕ7, успешно использую на всех сайтах.
margin... смысл в нём, если ты делаешь отступы для внутреннего блока, то почему бы просто не писать внутреннему - padding?
если я тебе 15 блоков напишу, из них 10 будут содержать и маргин и паддинг, 2 только паддинг, 1 маргин, 2 пустых. Понятно будет визуально? Нефига! А если все 15 блоков будут иметь только паддинг (или только маргин), то всё адекватно воспринимается фантазией, и легко воспринимается при верстке или при анализировании.

Спустя 2 часа, 49 минут, 37 секунд (25.06.2011 - 02:06) Rem написал(а):
не так страшен седьмой IE, как страшен шестой.

Спустя 3 часа, 2 минуты, 21 секунда (25.06.2011 - 05:09) inpost написал(а):
Rem
ну он вышел из поддержки в целом майкросовтом, считается устаревшим. Я всем говорю, что майкрософт отказался из-за уязвимостей и т.д. , поэтому я тоже под него сайт не делаю. Если надо - за дополнительную денюшку. Поддержка от 7-и и остальные браузеры. Вполне адекватно реагируют, плюют на 6-у, которых осталось 1,5 % вроде.

Спустя 3 часа, 31 минута, 51 секунда (25.06.2011 - 08:40) nugle написал(а):
inpost
отступлю не много от темы, можно ли как нибудь установить ие7,если установлен ие8?

А теперь по теме, ты хочешь сказать что ие7 идеальный? т.е. то что половина всего (css свойств) не работает даже в ие8 это нормально?

Спустя 19 часов, 16 минут, 55 секунд (26.06.2011 - 03:57) inpost написал(а):
nugle
Половина css свойств... ты программист? Выражайся грамотно, CSS2 не работает только пару свойств, в основном CSS3, у ФФ2 или ФФ1 тоже CSS3 не было введено, потому что на тот момент он вообще не был изобретён, не находишь взаимосвязи?

IE6-9 = IE TESTER , прога для винды такая есть.

Спустя 1 день, 2 часа, 25 минут (27.06.2011 - 06:22) nugle написал(а):
inpost
ладно, был не прав. Но просто глупо делать под ие6-7, когда появилось уже css3
спс за прогу)

Спустя 1 день, 4 часа, 23 минуты, 32 секунды (28.06.2011 - 10:46) Dianos написал(а):
major28
ну самое стандартное центрирование контейнеров это margin-right:auto; и margin-left:auto;.
А что бы друг за другом,то тогда в каждом контейнере пропиши float:left;

Спустя 2 минуты, 47 секунд (28.06.2011 - 10:49) nugle написал(а):
Dianos
это самое дурацкое решение с флоатами)
нужно искать обход

Спустя 1 час, 5 минут, 7 секунд (28.06.2011 - 11:54) inpost написал(а):
nugle
css3 пока что фейл, он нагружает процессор, а это есть основная проблема. Проблема №2 - программирую я не для программистов, а для клиентов и их клиентов, а они в основном не следят з прогрессом. В том году ездил в село к девушке своей, по дороге увидел лошадь с телегой (специальной), а ведь их уже заменили трактора оооочень давно. Тут та же ситуация, увы

Спустя 11 минут, 59 секунд (28.06.2011 - 12:06) nugle написал(а):
ну впринципе да)

Спустя 12 часов, 13 минут, 20 секунд (29.06.2011 - 00:19) Dianos написал(а):
Цитата
Dianos
это самое дурацкое решение с флоатами)
нужно искать обход

ок,буду знать.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.