Форум

Andrei · #1 (**permalink**) 02.10.2011, 14:33

Здравствуйте! Есть три дива, подскажите как сделать чтобы 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

<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 · #3 (**permalink**) 03.10.2011, 02:06

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

ksa · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 03.10.2011, 15:30

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

ksa · #7 (**permalink**) 03.10.2011, 15:57

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

если сделать тоже самое используя <table>, то это не совсем гуд ?

Дело хозяйское...

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

FINoM · #8 (**permalink**) 04.10.2011, 04:39

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

А вообще если сделать тоже самое используя <table>, то это не совсем гуд ?

Это считается дурным тоном. Но главное решение задачи, конечный потребитель в код не смотрит.

ksa · #9 (**permalink**) 04.10.2011, 08:39

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

Это считается дурным тоном.

Кем "считается"?

Kolyaj · #10 (**permalink**) 04.10.2011, 09:34

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

Это считается дурным тоном.

Дурным тоном считается развалившаяся вёрстка, а как она сделана -- всё равно.

Форум

Справочник

Discord чат

Курсы javascript