WWW.ZEOS.IN 1 161 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 Вот такой код: <div style="background-color: red;"> <div style="background-color: green; float: left; width: 200px;">текст</div> <div style="background-color: blue; width: 200px;">текст</div> </div> Делает так: Как сделать, чтобы синий блок тянулся вправо? Вот так: P.S. Таблицами могу сделать, а стилями не понимаю как сделать Цитата Ссылка на сообщение Поделиться на других сайтах
n0lik 75 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 (изменено) Самый простой сповоб <div style="background-color: red;" align="right"> <div style="background-color: green; float: left; width: 200px;">текст</div> <div style="background-color: blue; width: 200px;">текст</div> </div> Изменено 21 июля 2009 пользователем n0lik Цитата Ссылка на сообщение Поделиться на других сайтах
WWW.ZEOS.IN 1 161 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 Автор А какие еще способы бывают? Очень интересно все узнать Цитата Ссылка на сообщение Поделиться на других сайтах
n0lik 75 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 А какие еще способы бывают? Очень интересно все узнать Не знаю, может это поможет Цитата Ссылка на сообщение Поделиться на других сайтах
WWW.ZEOS.IN 1 161 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 (изменено) Автор А как тогда сделать, чтобы в красном, основном блоке, синий и зелёный блок тянулись вправо? Не понимаю, почему в этом коде:<div style="background-color: red;" align="right"> <div style="background-color: green; float: left; width: 200px;">текст</div> <div style="background-color: blue; width: 200px;">текст</div> </div> зелёный тянется влево, если основной блок (красный) указывает выравнивание вправо (align="right") Например, если сделать так таблицами:<table style="background-color: red;" width="100%" cellpadding="0" cellspacing="0"> <tr align="right"> <td> <table style="background-color: green; width: 200px;" align="left"> <tr> <td> текст </td> </tr> </table> <table style="background-color: blue; width: 200px;"> <tr> <td> текст </td> </tr> </table> </td> </tr> </table>То получается точно так же: P.S. В зеленой таблице прописано: align="left" не для того, чтобы она тянулась влево, а именно для того, чтобы её обтекала синяя таблица, а не была под ней. Не понимаю, почему так происходит? Ведь в основной таблице или DIV прописано выравнивание всего, что внутри них, в правую второну?! Изменено 21 июля 2009 пользователем WWW.ZEOS.IN Цитата Ссылка на сообщение Поделиться на других сайтах
baxus 49 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 Зеос Float смотри как работает. Зелёному ты дал свойство float:left а этот параметр не только говорит типа всплывать на лево. Здесь ты сразу указываешь ему два свойства. "Всплывать на лево" - от чего то что шло до него, и одновременно "Обтекать слева" - тем что шло после него. Тем самым если ты задаёшь зелёному float:left; он у тебя прижимается к левому краю а синий уже позиционируется в оставшемся пространстве влево или вправо. Если хочешь чтоб справа были оба блока то лучше всего прописать для зелёного райт а синему лефт. И в дивах если я не ошибаюсь алигн не работает, иначе зачем бы люди мучались придумывали отступами центровать, есть text-align: но он только текст позиционирует. Хотя херню сказад))) У тебя блоки поменяются местами... Делай на оба блока флоат райт Цитата Ссылка на сообщение Поделиться на других сайтах
WWW.ZEOS.IN 1 161 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 (изменено) Автор <div align="right">Странно, но align для div работает, хотя такого нет. Не понятно почему сделали: vertical-align, а horizontal-align не сделали. Зато сделали text-align P.S. Думаю web2.0 - это будет тогда, когда во всех браузерах всё будет одинаково отображаться и будет нормально продуманный CSS Изменено 21 июля 2009 пользователем WWW.ZEOS.IN Цитата Ссылка на сообщение Поделиться на других сайтах
baxus 49 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 Наверное ошибочно срабатывает.. но я тоже понять не могу зачем делать css таким безграничным и делать такие ограничения нелепые. вместо этого алигн приходится прописывать два блока один в другом и позиционировать их относительно друг друга, а всё для того чтоб по центру встало. Цитата Ссылка на сообщение Поделиться на других сайтах
WWW.ZEOS.IN 1 161 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 (изменено) Автор Фигня какая-то Если прописать так:<div style="background-color: red;"> <div style="background-color: green; float: right; width: 200px;">текст</div> <div style="background-color: blue; float: right; width: 200px;">текст</div> </div>то в принципе нормально, но пропадает красный основной блок! Спрашивается, почему? Изменено 21 июля 2009 пользователем WWW.ZEOS.IN Цитата Ссылка на сообщение Поделиться на других сайтах
baxus 49 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 Потому что блоки подтягиваются по оси Z к экрану монитора и фактически контейнер в котором они находятся остаётся без контента. А так как у него не заданы размеры он смыкается. Необходимо дать этому контейнеру также свойство float чтоб они все втроём встали на один слой. Тогда всё будет ок Но опять же если нужно чтоб контейнер был заданного размера... то слева от него начнётся совершенно ненужное обтекание если указал float:left; Нужно тогда ещё указать clear:left; - не обтекать слева но всплывать влево. Или можно попробовать выставить float:both; Цитата Ссылка на сообщение Поделиться на других сайтах
WWW.ZEOS.IN 1 161 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 Автор Цитата Ссылка на сообщение Поделиться на других сайтах
lifestar 18 Опубликовано: 21 июля 2009 Рассказать Опубликовано: 21 июля 2009 WWW.ZEOS.IN, так? http://mgudt.com/test/sample.html Цитата Ссылка на сообщение Поделиться на других сайтах
WWW.ZEOS.IN 1 161 Опубликовано: 22 июля 2009 Рассказать Опубликовано: 22 июля 2009 Автор Спасибо! Сохраню себе, чтобы разбираться Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.