Уменьшать размер элемента, если не помещаются на одном уровне
Возможно ли без яваскрипта сделать чтоб, один див рядом с другим сжимался, если их общий контейнер уменьшил размеры?
<head>
<style>
#first {
width: 150px;
height: 200px;
float: left;
background-color: green;
}
#second {
width: 100px;
height: 200px;
float: right;
background-color: red;
}
</style>
</head>
<body>
<div style="width: 300px; height: 300px; background-color: silver; margin-bottom: 10px">
<div id="first">1</div>
<div id="second">2</div>
</div>
<div style="width: 200px; height: 300px; background-color: silver;">
<div id="first">1</div>
<div id="second">2</div>
</div>
</body>
|
PashPP,
Проценты ?
<head>
<style>
#first {
width: 50%;
height: 200px;
float: left;
background-color: green;
}
#second {
width: 30%;
height: 200px;
float: right;
background-color: red;
}
</style>
</head>
<body>
<div style="width: 300px; height: 300px; background-color: silver; margin-bottom: 10px">
<div id="first">1</div>
<div id="second">2</div>
</div>
<div style="width: 200px; height: 300px; background-color: silver;">
<div id="first">1</div>
<div id="second">2</div>
</div>
</body>
|
Первый не должен меняться
|
PashPP,
Ещё вариант ...
<!DOCTYPE HTML>
<head>
<style>
#first {
width: 150px;
height: 200px;
float: left;
background-color: green;
}
#second {
margin-left: 70%;
width: 30%;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div style="width: 300px; height: 300px; background-color: silver; margin-bottom: 10px">
<div id="first">1</div>
<div id="second">2</div>
</div>
<div style="width: 200px; height: 300px; background-color: silver;">
<div id="first">1</div>
<div id="second">2</div>
</div>
</body>
|
рони,
Хитро, правда дальше налазить же будет. Но спасибо. |
| Часовой пояс GMT +3, время: 19:14. |