PDA

Просмотр полной версии : Верстка дивами трёх колонок


wrathchildtoo
16.10.2009, 17:53
В общем, никак не получается сверстать такую конструкцию:

Если имеются какие-нибудь соображения по этому поводу, поделитесь пожалуйста.

Oneill
16.10.2009, 19:08
float:left;

wrathchildtoo
16.10.2009, 21:27
Oneill, пробовал разные комбинации, но то, что мне надо, не получается.

Axvel
16.10.2009, 22:28
примерно нужно так
<style type="text/css">
.col1{float: left; width: 200px; height: 300px;}
.col2{float: left; width: 100%;}
.col3{
float: right; width: 200px; height: 300px;}
</style>
<div class="col2"><div class="col1">Текст первой колонки</div>Текст второй колонки<div class="col3">Текст третьей колонки</div></div>

wrathchildtoo
16.10.2009, 22:40
Axvel, не совсем так. В вашем примере, в качестве контейнера используется блок col2, а в самом контейнере находится всего два поля (col1 и col3). Центральный же блок отсутствует, а он то как раз и является резиновым и предназначен для того, чтобы в него что-то еще вместить.

Axvel
16.10.2009, 22:50
Axvel, не совсем так. В вашем примере, в качестве контейнера используется блок col2, а в самом контейнере находится всего два поля (col1 и col3). Центральный же блок отсутствует, а он то как раз и является резиновым и предназначен для того, чтобы в него что-то еще вместить.А текст ""Текст второй колонки" ни чем не говорит? И он налезает на правую и левую колонки или расположен между ними? При уменьшении-увеличении размера браузера разве расстояние между правой и левой колонками не меняется?

wrathchildtoo
16.10.2009, 23:01
Axvel, а Вы не пробовали вместо текста "Текст второй колонки" вставить побольше текста, и где после этого оказывается блок col3?

У меня, например, вот что получилось:

wrathchildtoo
17.10.2009, 00:00
Спасибо всем за участие, решение проблемы нашел в Гугле:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Только зарегистрированные пользователи могут видеть ссылки.]">
<html xmlns="[Только зарегистрированные пользователи могут видеть ссылки.]" xml:lang="ru">
<head>
<title>Three columns by DIVs</title>
<meta [Только зарегистрированные пользователи могут видеть ссылки.]"Content-Type" content="text/html; charset=Windows-1251" />
<style type="text/css" media="screen">
div.container
{
width: 100%;
height:500px;
border:solid 2px black;
padding:2px;
}
div.subcontainer
{
width:100%;
height:100%;
float:left;
}
div.left
{
float:left;
width:200px;
height:100%;
margin-left:-100%;
border:solid 1px blue;
}
div.central
{
height:100%;
margin:0 204px;
border:solid 1px blue;
}
div.right
{
float: right;
width: 200px;
height:100%;
border:solid 1px blue;
margin-left:-202px;
}
div.cleaning
{
clear:both;
}
</style>
</head>

<body>
<div class="container">
<div class="subcontainer">
<div class="central">
Текст второй колонки
</div>
</div>
<div class="left">
Текст первой колонки
</div>
<div class="right">
Текст третьей колонки
</div>
<div class="cleaning"></div>
</div>
</body>
</html>

Axvel
17.10.2009, 01:08
wrathchildtoo, вот немного переделал, теперь точно работает и кода поменьше будет :)
<style type="text/css">
.col1{
float: left;
width: 200px;
height: 300px;
position: absolute;
top: 0px;
right: 10px;

}

.col3{
float: right;
width: 200px;
height: 300px;
position: absolute;
top: 0px;
left: 10px;
}
.center{
float: none;
height: 300px;
position: absolute;
top: 0px;
right: 190px;
left: 210px;

}
</style>
<div>
<div class="col3">Текст первой колонки</div>
<div align="center" class="center">Центральная колонка</div>
<div class="col1">Текст третьей колонки</div>
</div>

Neo
23.10.2009, 19:10
Вот здесь попробуй ([Только зарегистрированные пользователи могут видеть ссылки.])