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

Question

也许最好用图片说明。

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

我该怎么做？

Answer 1

按照这些思路可能会实现您想要的；它对各个部分(a、c、e)使用绝对定位，但在您可以重复的非绝对定位的 div 中。

“b”部分是使用“.main”div 创建的，因为它会随着“.rightColumn”的内容展开。我假设因为那里没有内容，所以你会用颜色或图像填充它，所以将任何图像等放在 '.main' div 的样式中的 'b' 部分。

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. */
}

希望对您有所帮助。