CSS: нужен элемент для вертикального масштабирования с соседом

Question

Лучше всего проиллюстрировано изображением, возможно.

1. Высокая область (b) слева от основного элемента, заполненного содержимым (d), должна масштабироваться вместе с этим элементом содержимого (d), но все еще нуждается в этом верхнем левом угловом фрагменте (a) в его верхней части.
2. Также должны быть элементы, закрывающие нижнюю часть обоих столбцов, как указано (c, e).
3. Ширина всей области не может превышать 640 пикселей.
4. В потоке документа будет более одного из этих разделов, поэтому они не могут быть абсолютно позиционированы или что-то в этом роде.
5. Левый столбец (a, b, c) имеет фиксированную ширину, а элементы крышки (a, c, e) имеют фиксированную высоту. Правый столбец может быть фиксированной ширины, если это упрощает задачу.

Как мне это сделать?

Answer 1

Что-то в этом направлении может достичь того, чего вы хотите; он использует абсолютное позиционирование для различных частей (a, c, e), но внутри не совсем позиционированного div, который вы можете повторить.

Раздел «b» создается с использованием div «.main», поскольку он будет расширяться содержимым «.rightColumn». Я предположил, что, поскольку там не было содержимого, вы бы заполнили его цветом или изображением, поэтому поместите любое изображение и т. Д. Для элемента b в стили для div .main.

HTML

<div class="main">

    <div class="leftColumnTopCap"></div>

    <div class="rightColumn">

        <p>Your content here...</p>

    </div>

    <div class="leftColumnBottomCap"><div>
    <div class="rightColumnBottomCap"></div>

</div>

CSS

.main {
    /* Any 'b' piece styling goes in here. */
    display: block;
    float: left;
    width: 640px;
    margin: 0;
    padding: 0 0 100px 0; /* Change 100px to whatever the height of your bottom caps are. */
    position: relative; /* We can use relative positioning here. */
}

.rightColumn {
    display: block;
    float: right;
    width: 540px; /* Change to whatever width piece '640px - width of a' is. */
    margin: 0;
    padding: 0;
}

.leftColumnTopCap {
    position: absolute; /* The absolute position here relates to the 'main' div. */
    top: 0;
    left: 0;
    width: 100px; /* Change to whatever width piece 'a' is. */
    height: 100px; /* Change to whatever height piece 'a' is. */
}

.leftColumnBottomCap {
    position: absolute; /* The absolute position here relates to the 'main' div. */
    bottom: 0;
    left: 0;
    width: 100px; /* Change to whatever width piece 'c' is. */
    height: 100px; /* Change to whatever height piece 'c' is. */
}

.rightColumnBottomCap {
    position: absolute; /* The absolute position here relates to the 'main' div. */
    bottom: 0;
    right: 0;
    width: 540px; /* Change to whatever width piece '640px - width of a' is. */
    height: 540px; /* Change to whatever height piece '640px - width of a' is. */
}

Надеюсь, это поможет.

Answer 2

Иногда таблицы располагают наиболее подходящей идеей для выполнения работы. Я бы посчитал это такой ситуацией, рискуя потерпеть поражение, поскольку «таблицы не должны использоваться для проектирования / компоновки».

Другие решения потребуют (если они предназначены для нескольких браузеров) большого количества javascript или CSS3 гибкой структуры блока модуля.