Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.10.2011, 14:33
Профессор
Отправить личное сообщение для Andrei Посмотреть профиль Найти все сообщения от Andrei
 
Регистрация: 31.10.2009
Сообщений: 151

Фиксированный размер div блока
Здравствуйте! Есть три дива, подскажите как сделать чтобы column-1 был фиксированного размера, а растягивались только остальные !?

<div id="columns">
	<div class="column-1">
	1
	</div>

	<div class="column-2">
	2
	</div>

	<div class="column-3">
	3
	</div>
</div>


#columns{
width: 100%;
}

#columns .column-1{
width: 20%;
float:left;
}

#columns .column-2{
width: 20%;
float:left;
}

#columns .column-3{
width: 60%;
float:left;
}
Ответить с цитированием
  #2 (permalink)  
Старый 02.10.2011, 17:30
Профессор
Отправить личное сообщение для Триви Посмотреть профиль Найти все сообщения от Триви
 
Регистрация: 23.04.2010
Сообщений: 354

<style>
#columns{
  width: 100%;
}
#columns .column-1{
  width: 20%;
  float:left;
}
#columns .column-2{
  width: 20%;
  float:left;
}
#columns .column-3{
  width: 59%;
  float:left;
}
.column-1, .column-2, .column-3 {
  border: 1px solid #000;
}
</style>

<div id="columns">
  <div class="column-1">1</div>
  <div class="column-2">2</div>
  <div class="column-3">3</div>
</div>
Ответить с цитированием
  #3 (permalink)  
Старый 03.10.2011, 02:06
Профессор
Отправить личное сообщение для Andrei Посмотреть профиль Найти все сообщения от Andrei
 
Регистрация: 31.10.2009
Сообщений: 151

Нужно чтобы при ресайзе окна браузера column-1 всегда был 200px в ширину, а остальные колонки растягивались автоматически !?
Ответить с цитированием
  #4 (permalink)  
Старый 03.10.2011, 09:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Andrei
как сделать чтобы column-1 был фиксированного размера, а растягивались только остальные !?
Например изменить хтмл разметку...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#left {
	float: left;
	width: 20%;
	background-color: red;
}
#right {
	margin-left: 20%;
}
#r_left {
	margin-right: 25%;
	background-color: green;
}
#r_right {
	float: right;
	width: 25%;
	background-color: yellow;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='container'>
	<div id='left'>1111</div>
	<div id='right'>
		<div id='r_right'>33333</div>
		<div id='r_left'>22222</div>
	</div>
</div>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 03.10.2011, 09:16
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Andrei
column-1 всегда был 200px в ширину
Аааа, вона как. Тогда так

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#left {
	float: left;
	width: 200px;
	background-color: red;
}
#right {
	margin-left: 200px;
}
#r_left {
	margin-right: 25%;
	background-color: green;
}
#r_right {
	float: right;
	width: 25%;
	background-color: yellow;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='container'>
	<div id='left'>1111</div>
	<div id='right'>
		<div id='r_right'>33333</div>
		<div id='r_left'>22222</div>
	</div>
</div>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 03.10.2011, 15:30
Профессор
Отправить личное сообщение для Andrei Посмотреть профиль Найти все сообщения от Andrei
 
Регистрация: 31.10.2009
Сообщений: 151

ksa, спасибо! А вообще если сделать тоже самое используя <table>, то это не совсем гуд ?
Ответить с цитированием
  #7 (permalink)  
Старый 03.10.2011, 15:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Andrei
если сделать тоже самое используя <table>, то это не совсем гуд ?
Дело хозяйское...

Комбинированая вёрстка живёт и побеждает.
Ответить с цитированием
  #8 (permalink)  
Старый 04.10.2011, 04:39
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Сообщение от Andrei
А вообще если сделать тоже самое используя <table>, то это не совсем гуд ?
Это считается дурным тоном. Но главное решение задачи, конечный потребитель в код не смотрит.
Ответить с цитированием
  #9 (permalink)  
Старый 04.10.2011, 08:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от FINoM
Это считается дурным тоном.
Кем "считается"?
Ответить с цитированием
  #10 (permalink)  
Старый 04.10.2011, 09:34
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от FINoM
Это считается дурным тоном.
Дурным тоном считается развалившаяся вёрстка, а как она сделана -- всё равно.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фиксация блока DIV при сворачивании другого блока DIV kacnepbI4 jQuery 2 04.04.2011 14:15
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM Flash 3 30.11.2010 22:59
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM jQuery 0 15.09.2010 02:17
размер скрытого блока hangover Общие вопросы Javascript 4 04.12.2009 13:40