[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Опять про три колонки одинаковой высоты
Форум PHP программистов > Дизайн и верстка
Finnish
2.07.2009 - 12:14
Задача вроде бы тривиальная, но мне не подсилу.
Требуется сверстать код:
HTML
<div class="item">
<div class="left">Левая колонка</div>
<div class="center">Центральная колонка</div>
<div class="right">Правая колонка</div>
</div>


Основные параметры:
1. Левая колонка фиксированной ширины (здесь всё просто)
2. Ширина правой колонки по содержимому.
3. Средняя колонка занимает свободное пространство между левой и правой.
4. В центральной колонке иногда возникает необходимость разместить INPUT, SELECT или TEXTAREA. Заказчик просит ширину этих элементов по всей ширине центрального.
5. Высота всех колонок одинакова.

Помогите, пожалуйста... rolleyes.gif



Спустя 15 минут, 36 секунд (2.07.2009 - 11:29) Joker написал(а):
Самый простой вариант это таблица для данного случая.... дивы уравнивать между сабой относительно содержимого не так просто....

Спустя 1 час, 36 минут, 11 секунд (2.07.2009 - 13:05) Oyeme написал(а):
HTML
<style type="text/css">

div.left {
float:left;
border:1px solid black;

}

div.right {
float:right;
border:1px solid black;

overflow: hidden;

background: #CDEB8B url(top.png) no-repeat;
}

div.center {
float:left;
border:1px solid black;

}

div.item {
border:1px solid black;
float:left;


}
body{margin: 0; padding: 0; height:100%;}

</style>
<script type="text/javascript">
function load() {

var left = document.getElementById('left');
var center = document.getElementById('center');
var right = document.getElementById('right');

var item = document.getElementById('item');

var arr = new Array();

arr[0] = left.clientHeight;
arr[1] = center.clientHeight;
arr[2] = right.clientHeight;

// alert(Math.max.apply(0,arr));
var max = Math.max.apply(0,arr)+"px";
// alert(max);
left.style.height = max;
center.style.height = max;
right.style.height = max;



}
</script>
<body onload="load()"
<div class="item">
<div class="left" id="left">Левая колонка
<br>test<br>
<br>test<br>
<br>test<br>
<br>test<br>
</div>

<div class="center" id="center">Центральная колонка
<br>test<br>
<br>test<br>
</div>

<div class="right" id="right">Правая колонка</div>
</div>



Высоту сделал на java script.
Узнаю максимальную высоту.
Потом присваиваю каждому диву эту высоту,для одинаковой высоты всех дивов.
Думаю тебе всё ясно
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.