Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Фиксированный размер div блока (https://javascript.ru/forum/dom-window/21994-fiksirovannyjj-razmer-div-bloka.html)

Andrei 02.10.2011 14:33
Фиксированный размер 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;
}

Триви 02.10.2011 17:30 
<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>

Andrei 03.10.2011 02:06
Нужно чтобы при ресайзе окна браузера column-1 всегда был 200px в ширину, а остальные колонки растягивались автоматически !?

ksa 03.10.2011 09:14
Цитата:
Сообщение от 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>

ksa 03.10.2011 09:16
Цитата:
Сообщение от 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>

Andrei 03.10.2011 15:30
ksa, спасибо! А вообще если сделать тоже самое используя <table>, то это не совсем гуд ?

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

Комбинированая вёрстка живёт и побеждает. :)

FINoM 04.10.2011 04:39
Цитата:
Сообщение от Andrei
А вообще если сделать тоже самое используя <table>, то это не совсем гуд ?
Это считается дурным тоном. Но главное решение задачи, конечный потребитель в код не смотрит.

ksa 04.10.2011 08:39
Цитата:
Сообщение от FINoM
Это считается дурным тоном.
Кем "считается"? :)

Kolyaj 04.10.2011 09:34
Цитата:
Сообщение от FINoM
Это считается дурным тоном.
Дурным тоном считается развалившаяся вёрстка, а как она сделана -- всё равно.


Часовой пояс GMT +3, время: 22:00.
Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице