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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> DIV между двумя DIVами 
:(
    Опции темы
APro
Дата 15.12.2008, 20:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: 1



Как сделать, чтобы 1 div был ровно по центру между двумя другими, да ещё и резиновый?  smile  smile  smile 

Как я только не пробовал - всё равно не получается по центру! Может быть кто подскажет чего?


--------------------
Никогда не спорь с дураком, другие могут не заметить между вами разницы.
Чем реже открываешь рот, тем меньше слышишь глупостей.
PM MAIL WWW ICQ   Вверх
bars80080
Дата 15.12.2008, 20:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



три дива - первый с фиксированной шириной и float: left; второй с фиксированной шириной и float: right; третий без указаний - он будет резиновым
PM MAIL WWW   Вверх
APro
Дата 15.12.2008, 22:04 (ссылка)    | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: 1



неправда   smile 


--------------------
Никогда не спорь с дураком, другие могут не заметить между вами разницы.
Чем реже открываешь рот, тем меньше слышишь глупостей.
PM MAIL WWW ICQ   Вверх
K1ng
Дата 15.12.2008, 22:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет






Код

<div style="float:left;width:300px;">Левый див!</div>
<div style="float:right;width:300px;">Правый див!!!</div>
<div>Средний див!!</div>

Именно в таком порядке!
PM MAIL WWW ICQ   Вверх
APro
Дата 15.12.2008, 22:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: 1



не смешно!!!!  smile Там получается как то бредово!!! Есть другой вариант?


--------------------
Никогда не спорь с дураком, другие могут не заметить между вами разницы.
Чем реже открываешь рот, тем меньше слышишь глупостей.
PM MAIL WWW ICQ   Вверх
K1ng
Дата 15.12.2008, 23:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет



Этот вариант отлично работает! Тебя смущает что второй див сползает под первый при сужении до 700px? Ну извините! А ты чего ждал? Сделай таблицами! Ячейки перескакивать не будут! Или поставь для блока контейнера min-witdh:750px; к примеру:
HTML
<div style="min-width:750px;">
<p style="float:left;width:300px;">Левый див!</p>
<p style="float:right;width:300px;">Правый див!!!</p>
<p>Средний див!!</p>
</div>

Но этот способ будет бесполезен в браузерах: IE6 и Maxthon
PM MAIL WWW ICQ   Вверх
APro
Дата 15.12.2008, 23:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: 1



Я сделал 3 блока. 2 первых float:left, а третий float:right ... Я поставил в процентах: 22% 50% 22% соответственно. В средний блок добавил min-witdh:250px. Почему когда я приближаю в Opera, то последний див смещается вниз, хотя по идее если проставить 150px 250px 150px соответсвенно, то всё в одну строчку.... 


--------------------
Никогда не спорь с дураком, другие могут не заметить между вами разницы.
Чем реже открываешь рот, тем меньше слышишь глупостей.
PM MAIL WWW ICQ   Вверх
K1ng
Дата 15.12.2008, 23:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет



установите min-width для блока-контейнера! правый див падает вниз потому что ему нужно аставаться в кадре, а места уже нету! Если установите минимльную ширину то сворачиваться не будет! Следовательно ему всегда будет хватать места!

И все-же я не понимаю чем этот способ лучше того что я предложил! От перестановки мест слагаемых сумма не меняется!

Это сообщение отредактировал(а) K1ng - 15.12.2008, 23:39
PM MAIL WWW ICQ   Вверх
bars80080
Дата 16.12.2008, 01:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(APro @  15.12.2008,  22:29 Найти цитируемый пост)
Я сделал 3 блока. 2 первых float:left, а третий float:right 

ты хотя бы думаешь, что ты делаешь? или просто наляпать?

и чем тебе не нравится вариант, который признан стандартным при такой схеме построения?
PM MAIL WWW   Вверх
APro
Дата 16.12.2008, 07:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: 1



Ну вот к примеру 1-й блок - там меню, посередине - текст, 3-й - там ещё что-нить. Если в Середину текст кинуть, то получится, как только закончится 1-ая и 3-яя колонка, что этот текст разойдётся по всей ширене... А это не совсем хорошо ....


--------------------
Никогда не спорь с дураком, другие могут не заметить между вами разницы.
Чем реже открываешь рот, тем меньше слышишь глупостей.
PM MAIL WWW ICQ   Вверх
webster
Дата 16.12.2008, 09:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 34
Всего: 34



PM MAIL   Вверх
bars80080
Дата 16.12.2008, 10:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(APro @  16.12.2008,  06:53 Найти цитируемый пост)
1-ая и 3-яя колонка, что этот текст разойдётся по всей ширене... 

каким макаром <div> сможет получить разную ширину? или это уже не прямоугольный контейнер?
PM MAIL WWW   Вверх
APro
Дата 16.12.2008, 14:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: 1



"Золотой ты человек"© webster. Thx U


--------------------
Никогда не спорь с дураком, другие могут не заметить между вами разницы.
Чем реже открываешь рот, тем меньше слышишь глупостей.
PM MAIL WWW ICQ   Вверх
Рыжий
Дата 14.1.2009, 02:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: 1
Всего: 20



bars80080, если юзать стандартный метод - средний слой все равно заполняет 100% а боковые просто поверх него расположены.
Я сейчас делаю закругленные углы, справа и слева будут картинки с прозрачными краями (вот, нужны именно прозрачные углы) а вот между ними было бы хорошо разместить этот div. чтобы получилось вроде:
user posted image
зеленым - разделение слоев
красным - прозрачность.

Если делать по вышеуказанному способу, то средний слой просто занимает все пространство. 

PS как-то не хочется юзать таблицы =( должен же быть способ через div? А может есть другой способ сделать закругленные углы +резиновая верстка
PM MAIL ICQ   Вверх
Violator
Дата 14.1.2009, 04:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 15
Всего: 15



Рыжий, поставь у среднего слоя margin-left - на ширину левого слоя, а margin-right - на ширину правого слоя

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


 




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


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

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