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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> несколько div по ширине экрана 
:(
    Опции темы
Ziliboba123
Дата 23.12.2010, 00:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: -1
Есть ли возможность расположить несколько Div блоков фиксированных размеров и следования

Код

float: left;
width: 100px;
heigth: 100px;


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

Код

margin: 0 auto;


не работает, есть какиенибуть идеи?
PM MAIL   Вверх
ayax2005
Дата 23.12.2010, 05:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


echo $smile
**


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

Репутация: 3
Всего: 11
Нужно юзать display:inline-table, a не float. И всё равно не будет работать в MSIE7.


--------------------
все вопросы - из-за неверной формулировки задачи
PM MAIL ICQ   Вверх
Mavrun
Дата 23.12.2010, 08:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 9
Всего: 13
Код

float:left;
min-width:100px;
height: 100px;
width: 33%;
PM MAIL   Вверх
Ziliboba123
Дата 23.12.2010, 10:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: -1
Цитата(Mavrun @ 23.12.2010,  08:55)
Код

float:left;
min-width:100px;
height: 100px;
width: 33%;

нет вы поняли не так, сами блоки div фиксированной ширины, меня интересует создание автоматически изменяемого растояния между ними, в зависимости от ширины страницы.

Добавлено через 3 минуты и 53 секунды
Цитата(ayax2005 @ 23.12.2010,  05:12)
Нужно юзать display:inline-table, a не float. И всё равно не будет работать в MSIE7.

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

Код


<div style="min-width: 994px;">
<div style="width: 100px; height: 100px; display:inline-table; background-color: red; margin: 0 auto;">
123
</div>

<div style="width: 100px; height: 100px; display:inline-table; background-color: red; margin: 0 auto;">
123
</div>

<div style="width: 100px; height: 100px; display:inline-table; background-color: red; margin: 0 auto;">
123
</div>

</div>
PM MAIL   Вверх
Ziliboba123
Дата 25.12.2010, 19:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: -1
up
PM MAIL   Вверх
Amphiluke
Дата 26.12.2010, 09:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 9
Всего: 112
Код

<div style="display:table; width:100%;">
    <div style="display:table-cell">
        <div style="width:100px; height:100px; background:red; margin:0 auto;"></div>
    </div>
    <div style="display:table-cell">
        <div style="width:100px; height:100px; background:red; margin:0 auto;"></div>
    </div>
    <div style="display:table-cell">
        <div style="width:100px; height:100px; background:red; margin:0 auto;"></div>
    </div>
</div>

 smile 
PM   Вверх
Ziliboba123
Дата 28.12.2010, 21:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: -1
а чтобы еще работало под в IE
PM MAIL   Вверх
Amphiluke
Дата 29.12.2010, 21:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 9
Всего: 112
Цитата(Ziliboba123 @  29.12.2010,  00:52 Найти цитируемый пост)
а чтобы еще работало под в IE


Код

.cell {
    display:table-cell;
    *float:left;
    *width:expression(parseInt(document.body.clientWidth/3) + "px");
}


Код

<div style="display:table; width:100%;">
    <div class="cell">
        <div style="width:100px; height:100px; background:red; margin:0 auto;"></div>
    </div>
    <div class="cell">
        <div style="width:100px; height:100px; background:red; margin:0 auto;"></div>
    </div>
    <div class="cell">
        <div style="width:100px; height:100px; background:red; margin:0 auto;"></div>
    </div>
</div>
PM   Вверх
ksnk
Дата 30.12.2010, 12:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Цитата(Amphiluke @  26.12.2010,  09:14 Найти цитируемый пост)
 style="display:table; width:100%;">
    <div style="display:table-cell"

Гы-гы! Всегда удивлялся возможности дивного дизайна табличных данных  smile 
Ziliboba123,
А таблицей почему нельзя?
 


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Violator
Дата 4.1.2011, 19:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 15
Всего: 15
http://www.getincss.ru/wp-content/uploads/.../elements2.html
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

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


 




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


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

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