html - CSS 布局挑战 - float /定位元素

Question

我遇到了一个布局挑战，我正在尝试使用 CSS 来解决(如果有解决方案的话)。这是详细信息以及我要完成的任务。

• 没有 JS，纯 CSS
• 页面宽度 940px，需要自适应
• 框 A、B、C、D 和 E 的宽度设置为 300 像素
• 框 A、B、C 和 D 的定义高度为 352 像素
• F 框应为 640 像素，高度可变
• 盒子 E 应该可以有可变高度(不需要实际填满整个空间)
• 盒子A和B的位置应该有20px的右边距/填充
• 需要跨浏览器兼容并在 IE8 下工作

现在，这是棘手的部分:

• 如果盒子 C 被移除，盒子 D 应该取而代之，盒子 E 应该向上移动以填充盒子 D 留下的空间。见下文:
• 如果方框 B 和 C 被移除，方框 D 应该取代方框 B 的位置，方框 E 应该移动到顶部以填充方框 C 和 D 的区域。见下文:
• 编辑:只能删除框 B 和 C。

Answer 1

我认为这样做:Demo

HTML:

<div class="wrapper">
    <div class="a block">A</div>
    <div class="b block">B</div>
    <div class="c block">C</div>
    <div class="d block">D</div>
    <div class="e block">E</div>
    <div class="f block">F</div>
</div>

CSS:

.hide {
    display: none !important;
}

.wrapper {
    overflow: hidden;
    width: 940px;
    margin: 0 auto;
    font-size: 0;
}

.block {
    background: #666;
    color: #fff;
    font-size: 30px;
    width: 300px;
    height: 352px;
    display: inline-block;
    margin-bottom: 20px;
}

.b, .c, .d, .e { margin-left: 20px; }

.e, .f {
    height: auto;
    padding-bottom: 100000px;
    margin-bottom: -100000px;
}

.f {
    width: 640px;
    min-height: 373px; /* Greater than 372px */
    background: #999;
    float:left;
    margin-right: -20px;
}

---

注意在下面的代码中

.e, .f {
    padding-bottom: 100000px;
    margin-bottom: -100000px;
}

您必须使用大于两个元素高度的任何值，而不是 100000px。