Изменение ширины блоков
Доброго времени суток, есть 3 блока. Один из них статичный (скажем 100px). Нужно чтобы ширина у двух других выставлялась по 50% от оставшегося пространства.
$(function() { $(window).resize(adptt); }); $(document).ready(function() { $(window).load(adptt); }); function adptt() { var h = $(".dk_adpt_inner").width(); h = h - "100"; h = h / "2"; $(".a_left").css("width", h); $(".a_right").css("width", h); } <div class="dk_adpt_inner"> <div class="a_left"></div> <div class="a_center"></div> <div class="a_right"></div> </div> Подскажите где я ошибся в коде, спасибо! :cray: |
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <script src='http://code.jquery.com/jquery-latest.js'></script> <!-- <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> * { margin: 0; padding: 0; } .dk_adpt_inner { height: 100px; } .dk_adpt_inner > div { float: left; height: 100%; } .a_left { background-color: red; } .a_center { width: 100px; background-color: yellow; } .a_right { background-color: green; } </style> <script type='text/javascript'> $(function() { $(window).resize(adptt); $(window).load(adptt); function adptt() { var h = $(".dk_adpt_inner").width(); h = h - 100; h = h / 2 + 'px'; $(".a_left").css("width", h); $(".a_right").css("width", h); }; }); </script> </head> <body> <div class="dk_adpt_inner"> <div class="a_left">a_left</div> <div class="a_center">a_center</div> <div class="a_right">a_right</div> </div> </body> </html> |
Gamelast,
может без js, на css flex сделать?? |
Gamelast,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .dk_adpt_inner{ display:flex; width:100%; } .dk_adpt_inner>div{ background:#FFD700; height:200px; border:2px solid #006400; } .dk_adpt_inner>.a_left,.dk_adpt_inner>.a_right{ flex:1; } .dk_adpt_inner>.a_center{ width:100px; background:#32CD32; } </style> </head> <body> <div class="dk_adpt_inner"> <div class="a_left"></div> <div class="a_center"></div> <div class="a_right"></div> </div> </body> </html> |
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 09:54. |