Форум

Gamelast · #1 (**permalink**) 02.12.2016, 09:18

Доброго времени суток, есть 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>

Подскажите где я ошибся в коде, спасибо!

ksa · #2 (**permalink**) 02.12.2016, 09:28

Сообщение от Gamelast

где я ошибся в коде

Примеры нужно делать полные, не лениться...

<!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>

рони · #3 (**permalink**) 02.12.2016, 09:38

Gamelast,
может без js, на css flex сделать??

рони · #4 (**permalink**) 02.12.2016, 09:46

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>

Gamelast · #5 (**permalink**) 02.12.2016, 11:11

Сообщение от рони

Gamelast,
может без js, на css flex сделать??

Flex хорошая идея, но он не поддерживается старыми браузерами, и некоторыми телефонами(

Gamelast · #6 (**permalink**) 02.12.2016, 11:11

Сообщение от ksa

Примеры нужно делать полные, не лениться...

Огромное спасибо за ответ!

Форум

Справочник

Discord чат

Курсы javascript