Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> разместить div-ы, что то не придумать 
V
    Опции темы
oksale
Дата 12.2.2009, 17:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 192
Регистрация: 17.6.2005
Где: Санкт-Петербург

Репутация: 2
Всего: 9
Задача разместить дивы следующим образом: два дива слева, один под другим, еще один див справа, а между ними в оставшемся промежутке - текст. Как только ни пробовала - не удается разместить левые дивы - или нижний вправо уезжает, или правый .
Вот последний вариант: 
Код

// блок 3
<div style="float:left;"></div>
// блок 2
<div style="float:right;"></div>

// текст между блоками
<div>Some text</div>
  

Без левого нижнего блока. Как их все правильно организовать без абсолютного позиционирования?
--------------------
WBR, oksale
PM MAIL ICQ   Вверх
WebMast
Дата 12.2.2009, 17:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Front-end developer
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2
Вот так попробуй:
Код

<div style="float:left;background:#0099cc;">One</div>
<div style="float:left;background:#333;color:#fff;">Two</div>
<div style="float:right;background:#0099cc;">Four</div>
<div style="float:left;background:#ccc;clear:left;">Three</div>
<div style="background:#ccc;">Some text</div>

--------------------
Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome
PM MAIL WWW Skype   Вверх
Violator
Дата 12.2.2009, 17:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15
WebMast, 
и как это второй див у вас будет под первым?
PM MAIL   Вверх
WebMast
Дата 12.2.2009, 17:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Front-end developer
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2
А ты проверь мой код ; ). Только я перепутал, у меня там снизу третий. Если я что-то не так понял, то извиняйте! Оъясняйте задачу правильнее..
--------------------
Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome
PM MAIL WWW Skype   Вверх
oksale
Дата 12.2.2009, 17:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 192
Регистрация: 17.6.2005
Где: Санкт-Петербург

Репутация: 2
Всего: 9
WebMast: действительно работает!!!
Спасибо!

То, что нужно было, выглядит так:
Код

<div style="float:left;background:#0099cc; width:400px; height:100px;">One</div>
<div style="float:right;background:#0099cc; width:100px; height:150px;">Four</div>
<div style="float:left;background:#f00;clear:left; width:250px; height:150px;">Three</div>
<div style="background:#ccc;">
Some text Some text Some text Some text Some text Some text Some
Some text Some text Some text Some text Some text Some text Some text 
</div>


Это сообщение отредактировал(а) oksale - 12.2.2009, 18:03
--------------------
WBR, oksale
PM MAIL ICQ   Вверх
Violator
Дата 12.2.2009, 17:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15
WebMast, 
даже без проверки видно, посмотрите на 2 первых блока, как они будут находится друг под другом?
PM MAIL   Вверх
WebMast
Дата 12.2.2009, 18:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Front-end developer
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2
Violator, я же уже писал, что не второй будет у меня снизу, а 3. Он имеет внутри сообщение "Three"! Если сказали что все правильно, дальше беседу продолжи в ЛС..
--------------------
Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome
PM MAIL WWW Skype   Вверх
Violator
Дата 12.2.2009, 18:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15
WebMast, 
так что ж тут правильного

oksale, 
добавьте вместо Some Text
Код

1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>


Добавлено через 14 минут и 42 секунды
oksale, 
вам, я так понимаю, нужна обычная верстка с 3-мя столбиками
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style>
    body {margin:0;padding:0;}
    .left {float:left;width:200px;}
    .right {float:right;width:200px;}
    .center {margin:0 200px;}
  </style>
</head>

<body>
  <div class="left">
    <div>Left 1</div>
    <div>Left 2</div>
  </div>
  <div class="right">Right</div>
  <div class="center">Center</div>
</body>
</html>

почитайте, еще посты Forsaken, о баге 3px в ИЕ - http://forum.vingrad.ru/forum/topic-246868.html
PM MAIL   Вверх
WebMast
Дата 12.2.2009, 18:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Front-end developer
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2
Это совсем не то что надо было.. Да, видимо Violator прав. Вот что у меня вышло:
Код

<div style="float:left;width:400px;">
  <div style="background:#0099cc; width:400px; height:100px;">One</div>
  <div style="background:#f00;width:250px; height:150px;">Three</div>
</div>
<div style="float:right;background:#0099cc; width:100px; height:150px;">Four</div>
<div style="background:#ccc;margin:0 100px 0 400px;">
  Some text Some text Some text Some text Some text Some text Some
  Some text Some text Some text Some text Some text Some text Some text 
</div>

--------------------
Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome
PM MAIL WWW Skype   Вверх
oksale
Дата 13.2.2009, 01:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 192
Регистрация: 17.6.2005
Где: Санкт-Петербург

Репутация: 2
Всего: 9
Violator, спасибо за ссылку.
Но ваш вариант кода мне не подходит, т.к. важен именно тот факт, что два левых блока имеют разную ширину, а текст в центральном блоке должен обтекать их.
--------------------
WBR, oksale
PM MAIL ICQ   Вверх
Violator
Дата 13.2.2009, 02:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15
oksale, 
в следующий раз постарайтесь правильно ставить вопрос

Цитата(oksale @ 12.2.2009,  17:22)
... а между ними в оставшемся промежутке - текст ...
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0879 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.