Перейти к публикации

Рекомендованные сообщения

Вот такой код:

<div style="background-color: red;">

	<div style="background-color: green; float: left; width: 200px;">текст</div>

	<div style="background-color: blue; width: 200px;">текст</div>

</div>

Делает так:

cb19fefadc98d29144a5de7bbe26.png

Как сделать, чтобы синий блок тянулся вправо? Вот так:

90f4c020990e2b270f55e1824c76.png

P.S.

Таблицами могу сделать, а стилями не понимаю как сделать :(

Ссылка на сообщение
Поделиться на других сайтах

Самый простой сповоб

<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>

Изменено пользователем n0lik
Ссылка на сообщение
Поделиться на других сайтах

А какие еще способы бывают? Очень интересно все узнать :)

Ссылка на сообщение
Поделиться на других сайтах

А как тогда сделать, чтобы в красном, основном блоке, синий и зелёный блок тянулись вправо?

Не понимаю, почему в этом коде:

<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") :blink: Например, если сделать так таблицами:
<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>

То получается точно так же:

90f4c020990e2b270f55e1824c76.png

P.S.

В зеленой таблице прописано: align="left" не для того, чтобы она тянулась влево, а именно для того, чтобы её обтекала синяя таблица, а не была под ней.

Не понимаю, почему так происходит? Ведь в основной таблице или DIV прописано выравнивание всего, что внутри них, в правую второну?! :blink:

Изменено пользователем WWW.ZEOS.IN
Ссылка на сообщение
Поделиться на других сайтах

Зеос Float смотри как работает.

Зелёному ты дал свойство float:left а этот параметр не только говорит типа всплывать на лево. Здесь ты сразу указываешь ему два свойства. "Всплывать на лево" - от чего то что шло до него, и одновременно "Обтекать слева" - тем что шло после него.

Тем самым если ты задаёшь зелёному float:left; он у тебя прижимается к левому краю а синий уже позиционируется в оставшемся пространстве влево или вправо.

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

И в дивах если я не ошибаюсь алигн не работает, иначе зачем бы люди мучались придумывали отступами центровать, есть text-align: но он только текст позиционирует.

Хотя херню сказад))) У тебя блоки поменяются местами... Делай на оба блока флоат райт

Ссылка на сообщение
Поделиться на других сайтах

<div align="right">

Странно, но align для div работает, хотя такого нет.

Не понятно почему сделали: vertical-align, а horizontal-align не сделали. Зато сделали text-align :wacko:

P.S.

Думаю web2.0 - это будет тогда, когда во всех браузерах всё будет одинаково отображаться и будет нормально продуманный CSS

Изменено пользователем WWW.ZEOS.IN
Ссылка на сообщение
Поделиться на других сайтах

Наверное ошибочно срабатывает.. но я тоже понять не могу зачем делать css таким безграничным и делать такие ограничения нелепые. вместо этого алигн приходится прописывать два блока один в другом и позиционировать их относительно друг друга, а всё для того чтоб по центру встало.

Ссылка на сообщение
Поделиться на других сайтах

Фигня какая-то :(

Если прописать так:

<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>

то в принципе нормально, но пропадает красный основной блок! Спрашивается, почему? :o:huh::blink:

Изменено пользователем WWW.ZEOS.IN
Ссылка на сообщение
Поделиться на других сайтах

Потому что блоки подтягиваются по оси Z к экрану монитора и фактически контейнер в котором они находятся остаётся без контента. А так как у него не заданы размеры он смыкается. Необходимо дать этому контейнеру также свойство float чтоб они все втроём встали на один слой. Тогда всё будет ок

Но опять же если нужно чтоб контейнер был заданного размера... то слева от него начнётся совершенно ненужное обтекание если указал float:left;

Нужно тогда ещё указать clear:left; - не обтекать слева но всплывать влево.

Или можно попробовать выставить float:both;

Ссылка на сообщение
Поделиться на других сайтах

Спасибо! Сохраню себе, чтобы разбираться :)

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...