Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.12.2016, 09:18
Новичок на форуме
Отправить личное сообщение для Gamelast Посмотреть профиль Найти все сообщения от Gamelast
 
Регистрация: 02.12.2016
Сообщений: 4

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

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

Последний раз редактировалось Gamelast, 02.12.2016 в 09:23.
Ответить с цитированием
  #2 (permalink)  
Старый 02.12.2016, 09:28
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Gamelast,
может без js, на css flex сделать??
Ответить с цитированием
  #4 (permalink)  
Старый 02.12.2016, 09:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #5 (permalink)  
Старый 02.12.2016, 11:11
Новичок на форуме
Отправить личное сообщение для Gamelast Посмотреть профиль Найти все сообщения от Gamelast
 
Регистрация: 02.12.2016
Сообщений: 4

Сообщение от рони Посмотреть сообщение
Gamelast,
может без js, на css flex сделать??
Flex хорошая идея, но он не поддерживается старыми браузерами, и некоторыми телефонами(
Ответить с цитированием
  #6 (permalink)  
Старый 02.12.2016, 11:11
Новичок на форуме
Отправить личное сообщение для Gamelast Посмотреть профиль Найти все сообщения от Gamelast
 
Регистрация: 02.12.2016
Сообщений: 4

Сообщение от ksa Посмотреть сообщение
Примеры нужно делать полные, не лениться...
Огромное спасибо за ответ!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение ширины таблицы с JS igory Элементы интерфейса 5 14.11.2013 15:47
Динамическое изменение ширины контента utb Элементы интерфейса 7 18.04.2013 17:08
Изменение ширины элемента Shurik Элементы интерфейса 5 27.02.2013 15:29
изменение ширины он лоад cristalith Элементы интерфейса 4 28.06.2010 11:23
Изменение ширины полосы прокрутки Devoto Общие вопросы Javascript 3 07.07.2008 17:01