Форум

PashPP · #1 (**permalink**) 09.01.2013, 20:13

Возможно ли без яваскрипта сделать чтоб, один див рядом с другим сжимался, если их общий контейнер уменьшил размеры?

<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>

рони · #2 (**permalink**) 09.01.2013, 20:52

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 · #3 (**permalink**) 09.01.2013, 21:16

Первый не должен меняться

рони · #4 (**permalink**) 09.01.2013, 21:39

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>

PashPP · #5 (**permalink**) 09.01.2013, 22:25

рони,
Хитро, правда дальше налазить же будет.
Но спасибо.

Форум

Справочник

Discord чат

Курсы javascript