Фиксированный размер 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; } |
<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>
|
Нужно чтобы при ресайзе окна браузера 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: 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>
|
Цитата:
<!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>
|
ksa, спасибо! А вообще если сделать тоже самое используя <table>, то это не совсем гуд ?
|
Цитата:
Комбинированая вёрстка живёт и побеждает. :) |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Блендамед тоже одобрен стоматологической ассоциацией обшероссийской... :lol: |
ksa,
Ок. Хорошими верстальщиками. |
Цитата:
P.S. Вспомнился анекдот... - Кто-то мне говорил что он хороший верстальщик... А! Да он же сам и говорил... |
FINoM,
Правильно таблици только для таблиц, остальное css display:table; display:table-cell; если нужны ослы то в условные коментарии и тги и стили и всё будет гуд.... Цитата:
|
Цитата:
|
ksa,
Не совсем понял? что я не правильно написал? если вы считаете что display:table; display:table-cell; тоже самое что table и td ну тогда :lol: |
Цитата:
Ибо если бегает как собака... Лает как собака и выглядит как собака... То мобуть то и есть собака. |
ksa,
Вы про семантическую вёрстку слышали? if (Вы != 'согласны'){ Вам нужно срочно сказать разработчикам html 5 о ненадобности семантических тегов пока они не приняли стандарт!:nono: } else{ список сделаный с помощью css таблицей, не являеться таблицей, а остаёться списком.. так что иногда собака это на самом деле кошка!:) } |
Цитата:
|
Цитата:
Цитата:
|
Цитата:
И лично у меня особых проблем верстать семантично не вызывает, тем более валидно... |
ksa,
Дело Ваше как Вам верстать... |
Цитата:
|
Цитата:
Ладно думаю стоит закончить потому что холивар начинается.... |
блок fix размер
ребят нужен скрипт блока наподобие этого но только сама суть в том что бы по ширине размер фиксированный и по высоте
<table align="center" border="1" cellpadding="1" cellspacing="1" style="height: 200px; width: 940px;"> <tbody> <tr> <td>контент</td> </tr> </tbody> </table> только он у меня height: 200px; все равно растягивает на большее в этом все у меня стоит бегущая строка информера (ucoz)<marquee style="width:940px" "height:10px;"; background:; padding:0px; border:0px solid 0; ; font-family:Arial, Helvetica, sans-serif; font-size:0px; font-weight:bold;"> $MYINF_23$ </marquee> в целом так <table align="center" border="1" cellpadding="1" cellspacing="1" style="height: 200px; width: 940px;"> <tbody> <tr> <td><marquee style="width:940px" "height:10px;"; background:; padding:0px; border:0px solid 0; ; font-family:Arial, Helvetica, sans-serif; font-size:0px; font-weight:bold;"> $MYINF_23$ </marquee></td> </tr> </tbody> </table> |
Никто не запрещает использовать display: table-cell у блоков.
На семантику это никак не влияет, и это так же блочная верстка. http://jsfiddle.net/Kb7RD/
#columns {
display: table;
width: 100%;
border: 1px solid #333;
}
.column-1,
.column-2,
.column-3 {
display: table-cell;
height: 40px;
border: 1px solid #f00;
}
.column-1 {
width: 200px;
}
Либо через float, но понадобится дополнительная обёртка 2 и 3 блоку http://jsfiddle.net/2xE8r/
<div id="columns" class="clearfix">
<div class="column-1"></div>
<div class="columns-2">
<div class="column-2"></div>
<div class="column-3"></div>
</div>
</div>
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
#columns {
display: block;
width: 100%;
border: 1px solid #333;
}
.columns-2 {
margin-left: 200px;
}
.column-1,
.column-2,
.column-3 {
float: left;
height: 40px;
}
.column-1 {
width: 200px;
background: #f00;
}
.column-2,
.column-3 {
width: 50%;
}
.column-2 {
background: #ff0;
}
.column-3 {
background: #0f0;
}
|
| Часовой пояс GMT +3, время: 20:27. |