Home PHP А.Волос "PHP Практика " Глава 5 Несколько скриптов Колонки на странице сайта
Колонки на странице сайта PDF Печать E-mail
Автор: А.Волос   

Borboletas

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

 Давайте разберемся, как же добиться такого эффекта. Вот какое решение предложил автор  Сергей Чикуёнок в своем блоге: http://chikuyonok.ru/2009/06/float-columns/

 

 2-х колоночный сайт

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml"></a><a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en">
<head>
 <title>Pull Quotes 1</title>
 <style type="text/css" media="all">
.col-wrap1 {
        width:25%;
        background:blue;
}
.col-wrap2 {
        width:200%;
        margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
        position:relative;
        left: 100%;
        background:red;
}  
.col1 {
        float:left;
        width:50%;
        margin-right:-100%;
        position:relative;
        left:-50%;
}
  .clear {
        clear:both;
        font-size:0;
        overflow:hidden;
}
 </style>
</head>
<body>
<div class="col-wrap1">
        <div class="col-wrap2">
                <div class="col1">left column</div>
                <div class="col2">center column</div>
                <div class="clear"></div>
        </div>
</div>
</body>
</html>

 

Используем этот замечательный пример, и на его основе создадим 3, 4 и 5 колоночные страницы! 

 

3-х колоночный сайт.

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></a><a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml"></a><a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en">
<head>
 <title>Pull Quotes 1</title>
 <style type="text/css" media="all">
.col-wrap1 {
        width:25%;
        background:blue;
}
  .col-wrap2 {
        width:200%;
        margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
        position:relative;
        left: 100%;
        background:red;
}
.col-wrap3 {
        width:50%;
        margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
        position:relative;
        left: 100%;
        background:grey;
}
.col1 {
        float:left;
        width:50%;
        margin-right:-100%;
        position:relative;
        left:-300%;
}
.col2 {
        float:left;
        width:50%;
        margin-right:-100%;
        position:relative;
        left:-200%;
}
.clear {
        clear:both;
        font-size:0;
        overflow:hidden;
}
 </style>
</head>
<body>
<div class="col-wrap1">
    <div class="col-wrap2">
        <div class="col-wrap3">
             <div class="col1">left column</div>
             <div class="col2">center column</div>
             <div class="col3"> right column<br>right column<br>right column<br> </div>
        </div>
    </div>
</div>
</body>
</html>
 

 

4-х колоночный сайт.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml"></a><a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en">
<head>
 <title>Pull Quotes 1</title>
 <style type="text/css" media="all">
.col-wrap1 {
        width:25%;
        background:blue;
}  
.col-wrap2 {
        width:100%;
        margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
        position:relative;
        left: 100%;
        background:red;
}
.col-wrap3 {
        width:100%;
        margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
        position:relative;
        left: 100%;
        background:grey;
}  
.col-wrap4 {
        width:100%;
        margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
        position:relative;
        left: 100%;
        background:yellow;
}
 .col1 {
        float:left;
        width:50%;
        margin-right:-100%;
        position:relative;
        left:-300%;
}
.col2 {
        float:left;
        width:50%;
        margin-right:-100%;
        position:relative;
        left:-200%;
}
.col3 {
        float:left;
        width:50%;
        margin-right:-100%;
        position:relative;
        left:-100%;
}  
.clear {
        clear:both;
        font-size:0;
        overflow:hidden;
}
 </style>
</head>
<body>
<div class="col-wrap1">
    <div class="col-wrap2">
        <div class="col-wrap3">
            <div class="col-wrap4">
                <div class="col1">1 column</div>
                <div class="col2">2 column</div>
                <div class="col3">3 column <br></div>
                <div class="col4">4 column <br>right column <br>right column <br>   </div>
                <div class="clear"></div>     
            </div>
        </div>
    </div>
</div>
</body>
</html>
 
 

 

 

5-ти колоночный сайт.

 

 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></a><a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml"></a><a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en">
<head>  
<title>Pull Quotes 1</title>  
<style type="text/css" media="all">
.col-wrap1 {
        width:20%;
        background:blue;
}  
.col-wrap2 {
        width:100%;
        margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
        position:relative;
        left: 100%;
        background:red;
}
.col-wrap3 {
        width:100%;
        margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
        position:relative;
        left: 100%;
        background:grey;
}  
.col-wrap4 {
        width:100%;
        margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
        position:relative;
        left: 100%;
        background:yellow;
}
.col-wrap5 {
        width:100%;
        margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
        position:relative;
        left: 100%;
        background:green;
}
 .col1 {
        float:left;
        width:50%;
        margin-right:-100%;
        position:relative;
        left:-400%;
}
.col2 {
        float:left;
        width:50%;
        margin-right:-100%;
        position:relative;
        left:-300%;
}
.col3 {
        float:left;
        width:50%;
        margin-right:-100%;
        position:relative;
        left:-200%;
}
.col4 {
        float:left;
        width:50%;
        margin-right:-100%;
        position:relative;
        left:-100%;
}  
.clear {
        clear:both;
        font-size:0;
        overflow:hidden;
}
 </style>
</head>
<body>
<div class="col-wrap1">
    <div class="col-wrap2">
        <div class="col-wrap3">
            <div class="col-wrap4">
                <div class="col-wrap5">
                    <div class="col1">1 column</div>
                    <div class="col2">2 column</div>
                    <div class="col3">3 column <br></div>
                    <div class="col4">4 column <br></div>
                    <div class="col5">5 column <br>right column <br>right column <br>   </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

 

Обновлено 23.09.2014 16:41