kevkev
Newbie | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Здравствуйте, Возникла такая не понятная ситуация с позиционированием блоков в блоке. Ниже представлен готовый тестовый пример (html-страничка), просто рядом с ней положить jquery.js и запустить. В этом примере блок #h-phones помещается в самую правую часть блока #header-block, учитывая отступы последнего... Здесь всё правильно. НО когда мы начинаем уменьшать размер окна браузера - блок #h-phones "уходит" вправо -- ПОЧЕМУ? ведь #header-block в % и отступ слева для #h-phones в процентах... Для теста скопируйте и запустите следующий код (рядом положить jquery.js): Код: <!DOCTYPE html> <html id="nojs" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>test</title> <script type="text/javascript" src="jquery.js"></script> <style> header{ width:100%; background-color: #999999; display: block; margin-bottom: 10px; } #header-block{ width: 80%; margin-left: auto; margin-right: auto; padding-left: 5px; padding-right: 5px; border:1px dotted #FFF; height:120px } #header-block:before, #header-block:after{ display: table; content: " "; } #header-block:after{ clear: both; } #h-phones ul{ padding-left: 0; list-style: none; border:1px solid blue; } #logo, #alogo, #slogan, #h-phones { clear: left; cursor: move; float: left; } </style> <script> $(document).ready(function (){ //все левые отступы #header-block + левый бордюр HBbbb = parseFloat(parseFloat($("#header-block").css('margin-left')) + parseFloat($("#header-block").css('padding-left')) + parseFloat($("#header-block").css('border-left-width'))); HBwidth = $("#header-block").width(); //ширина #header-block HPwidth = $("#h-phones").width(); //ширина нужного блока //для теста - просто "приклеить" блок к правому краю lleft = HBwidth - HPwidth + HBbbb; //отступ в px pleft = parseFloat((lleft / (HBwidth + (HBbbb*2))) * 100); //отступ в процентах //Двигаем: $("#header-block").css('position','relative'); $("#h-phones").css({'position':'absolute','top':0,'left':pleft+'%'}); }); </script> </head> <body> <div id="wrap-header"> <header> <div id="header-block"> <div id="h-phones"> <ul><li>1-800-45-PEACH</li><li>1-800-45-PEACH</li><li>1-800-45-PEACH</li></ul> </div> </div> </header> </div> </body> </html> |
|