[CSS]Простой вопрос по дивной верстке

vit_or

Как сделать, чтобы 3 слоя располагались на одном уровне по горизонтали, 1 слой был выровнен по левому краю, 2 слой по центру, 3 слой по правому краю(см. рисунок)?О ширине слоев ничего не известно.

Я пробовал так:



#left{	

	float:left;

}



#middle{

	float:left;

}



....

<div align="right">



<div id="left">

</div>

<div id="middle">

</div>

<div id="right"> 

</div>



<div>

Левый и правый дивы выравниваются правильно, но центральный сползает влево.

pitrik2

я так понимаю что дивы надо располагать по два
т.е. если ты хочешь рядом расположить три, то ставишь один а рядом контейнер для второго с третьим
т.е. что-то такое:
<div левый></div>
<div float:right;width:50% контейнер для среднего и правого>
<div средний></div>
<div float:right правый></div>
</div>
левому и среднему float не нужен

vit_or

width:50%

Я написал, что о ширине слоев ничего неизвестно. В противном случае можно было бы использовать margin-left и margin-right.

pitrik2

Я написал, что о ширине слоев ничего неизвестно. В противном случае можно было бы использовать margin-left и margin-right.

не тупи
это ширина не слоя а контейнера
это сделано для расположения его по центру

vit_or

не тупи
это ширина не слоя а контейнера
это сделано для расположения его по центру

Если сделать контейнер для правого и среднего дивов шириной 50%, то середина среднего дива будет иметь по оси абсцисс координату (50% + ширина_дива*0.5 что не равно 50%. Если бы мы знали ширину среднего слоя, то можно было бы указать для него отрицательный margin-left, равный половине его ширины, и слой встал бы по центру.

livemix

если это не теоретическое занятие, а нужно в реальной практике, очень рекомендую посмотреть в сторону таблиц

pitrik2

Если сделать контейнер для правого и среднего дивов шириной 50%, то середина среднего дива будет иметь по оси абсцисс координату (50% + ширина_дива*0.5 что не равно 50%. Если бы мы знали ширину среднего слоя, то можно было бы указать для него отрицательный margin-left, равный половине его ширины, и слой встал бы по центру.

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

dedwowan

Он у тебя нигде не работает -)

dedwowan

Задача более-менее нормально решается, если известна ширина левого и правого блока.
Тогда для среднего указываешь внешний div с padding'ми равными ширине левого и правого блока соответственно, левый и правый позиционируются абсолютно. Ну и дорабатываешь напильником стили во внутреннем контейнере среднего блока так, что он отображался там где надо.

pitrik2

Он у тебя нигде не работает -)

да как же не работает то?



<style type="text/css">

body {padding:0;margin:0;}

div {

  height:100px;

  padding:0;margin:0;

}

#left {

  background: lightgreen;

}

#cont {

  float:right;

  width:50%

}

#middle {

  background: lightblue;

}

#right {

  float:right;

  background: pink;

}

</style>



<script type="text/javascript">

function print {

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



  left.appendChild(document.createElement('br';

  left.appendChild(document.createTextNode('center = ' + left.clientWidth / 2;



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

  left.appendChild(document.createElement('br';

  left.appendChild(document.createTextNode('left edge of middle = ' + cont.offsetLeft;

}

</script>



<body onload="print">



<div id="cont">



<div id="right">right</div>

<div id="middle">middle</div>



</div>

<div id="left">left</div>



</body>

выводит:
center = 640
left edge of middle = 640

dedwowan

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

У меня, в тупом ИЕ6 он, кстати говоря, вывел
center = 313
left edge of middle = 629

apl13

О ширине слоев ничего не известно.

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

dedwowan

Глючит, в постановке задачи не сказано, что центральный слой имеет право закрывать крайние. А из картинки видно, что ширина экрана может быть больше общей ширины слоев.

apl13

Ну в смысле, что они одинаково ограничены сверху. В смысле, сбоку. В общем, в ширину. :crazy:

IvladV71

Я пробовал так:



#left{	

	float:left;

}



#middle{

	float:left;

}



....

<div align="right">



<div id="left">

</div>

<div id="middle">

</div>

<div id="right"> 

</div>



<div>

А случайно

#middle {margin: auto;  float: none;}

не решает ли задачу? Или же middle должен центрироваться относительно границ боковых блоков?

dedwowan

Да нифига... Может там скроллинг должен появляться, если ширина экрана меньше общей ширины блоков? =)
Пока чувак граничные условия не опишет, точное решение не получит :grin:

avinir60

Самый разумный в данном случае подход - использовать таблицу и table-layout: fixed. Тогда даже получится сделать левый и правый слои резиновыми, но одинаковыми.

Оставить комментарий