CSS：需要一个元素与其相邻元素垂直缩放

Question

也许最好用图像来说明。

1. 主要内容填充元素 (d) 左侧的高区域 (b) 需要与该内容元素 (d) 一起缩放，但仍需要其顶部的左上角部分 (a)。
2. 还需要有一些元素覆盖两列的底部，如 (c、e) 所示。
3. 整个区域的宽度不能超过 640px。
4. 文档流程中将有多个这些部分，因此它们不能绝对定位或其他什么。
5. 左列 (a,b,c) 是固定宽度，帽片 (a,c,e) 是固定高度。右列可以是固定宽度的，如果这样可以让事情变得更简单的话。

我该怎么做？

Answer 1

沿着这些思路的东西可能会实现你想要的；它对各个部分（a、c、e）使用绝对定位，但在可以重复的非绝对定位的 div 内。

“b”部分是使用“.main”div 创建的，因为它将随“.rightColumn”的内容展开。我认为因为其中没有内容，所以您需要用颜色或图像填充它，因此将“b”部分的任何图像等放入“.main”div 的样式中。

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