Колонки на странице сайта |
Автор: А.Волос |
Очень часто при верстке макетов необходимо, чтобы колонки имели одинаковую высоту. Это очень легко реализуется при верстке таблицами, но в блочной верстке эту задачу выполнить немного сложнее. Давайте разберемся, как же добиться такого эффекта. Вот какое решение предложил автор Сергей Чикуёнок в своем блоге: 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 |