Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > несколько div по ширине экрана


Автор: Ziliboba123 23.12.2010, 00:26
Есть ли возможность расположить несколько Div блоков фиксированных размеров и следования

Код

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


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

Код

margin: 0 auto;


не работает, есть какиенибуть идеи?

Автор: ayax2005 23.12.2010, 05:12
Нужно юзать display:inline-table, a не float. И всё равно не будет работать в MSIE7.

Автор: Mavrun 23.12.2010, 08:55
Код

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

Автор: Ziliboba123 23.12.2010, 10:41
Цитата(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>

Автор: Ziliboba123 25.12.2010, 19:37
up

Автор: Amphiluke 26.12.2010, 09:14
Код

<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 

Автор: Ziliboba123 28.12.2010, 21:52
а чтобы еще работало под в IE

Автор: Amphiluke 29.12.2010, 21:15
Цитата(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>

Автор: ksnk 30.12.2010, 12:54
Цитата(Amphiluke @  26.12.2010,  09:14 Найти цитируемый пост)
 style="display:table; width:100%;">
    <div style="display:table-cell"

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

Автор: Violator 4.1.2011, 19:40
http://www.getincss.ru/wp-content/uploads/2008/elements2.html

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)