CSS布局挑战 - 浮动/定位元素

Question

遇到布局挑战我试图用CSS解决（如果有解决方案）。以下是我要完成的细节和内容。

• 没有JS，纯CSS
• 页面宽度940px，需要响应
• 方框A，B，C，D＆amp; E的设定宽度为300px
• 方框A，B，C＆amp; D的定义高度为352px
• 框F应为640px，高度可变
• Box E应该能够有一个可变高度（不需要实际填充整个空间）
• 框A和B的位置应具有20px
的右边距/填充
• 需要跨浏览器兼容并在IE8中工作

现在，这是一个棘手的部分：

• 如果框C被移除，框D应该移动它，框E应该向上移动以填充框D留下的空间。见下文：
• 如果是方框B＆amp; C被移除，方框D应该取出方框B的位置，方框E应移到顶部以填充方框C＆amp; D区。见下文：
• 编辑：只有方框B＆amp; 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，您必须使用任何大于两个元素高度的值。

Answer 2

这有效（虽然没有在IE8中测试过）

它使用：

• display: inline-block;
• vertical-align: top;
• position: absolute;
• float: left;

小提琴演示：

• 的 All blocks
• 的 No block C
• 的 No block B and C

代码：

HTML：

<div class="wrapper">
  <div class="box"> Box A</div>
  <div class="box">Box B</div>
  <div class="box">Box C</div>
  <div class="box">Box D</div>
  <div class="dummy"></div>
  <div class="box">Box E</div>
  <div class="content">
    Box F
  </div>
</div>

CSS：

.wrapper {
  font-size: 0;
  width: 960px;
  position: relative;
  margin: 0 auto;
}

.wrapper div {
  font-size: 14px;
}

.box {
  display: inline-block;
  width: 300px;
  height: 352px;
  margin: 0 20px 20px 0;
  background: #e5e5e5;
}

.dummy,
.content {
  width: 640px;
}

.dummy {
  float: left;
  height: 373px;
}

.content {
  position: absolute;
  top: 372px;
  left: 0;
  width: 640px;
}