Прежде всего, привет всем.
Эта проблема сводит меня с ума, поэтому я надеюсь на простое решение
Вот изображение того, что я хотел изначально .
Но я не хотел использовать хаки, чтобы получить Box 1 и (Box 2 + Box 3) для расширения друг с другом. Поэтому я просто буду использовать цвет фона на обертке, чтобы не было заметно, что они имеют разную высоту.
Вот что у меня сейчас:
CSS
#wrapper {
background: #000;
width: 50%;
float: left;
}
#box1 {
background: #FF0012;
width: 65%;
float: left;
}
#box2 {
background: #141;
width: 35%;
margin-left: 65%;
}
#box3 {
background:#AA1232;
width: 35%;
margin-left: 65%;
}
HTML
<body>
<div id="wrapper">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
</div>
</body>
Если вам интересно, почему я не использую float: right; в Box 2 и 3, то это потому, что если Box 1 ниже, чем Box 2, то Box 3 будет плавать под Box 1, а не под Box 2.
Проблема:
1. Прикрепите коробку 3 к нижней части обертки.
2. Когда строки вставляются в Box 3 и Box 2, они не должны переполняться - вместо этого увеличьте высоту упаковщиков (как это происходит с кодом, который я разместил)
Если я использую position: absolute; bottom: 0; для Box 3, он будет переполнен Box 2, когда строки вставлены, и Box 3 станет слишком высоким.
Есть идеи, как это решить?