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

我正试图用CSS解决一个布局难题（如果有解决方案的话）。下面是我要完成的细节

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

现在，这里是棘手的部分：

• 如果移除了方框C，则方框D应取代其位置，方框E应向上移动，以填充方框D留下的空间。见下文：
• 如果拆下B&C盒，则D盒应取代B盒，E盒应移到顶部以填充C&D盒区域。见下文：
• 编辑：只能删除B&C框。

我认为这可以做到：

HTML:

---

注意，在下面的代码中

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

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

100000px

。

这是可行的（但尚未在IE8中测试）

它使用：

• 显示：内联块

• 垂直对齐：顶部

• 位置：绝对位置

• float：左

小提琴演示：

代码：

HTML:

---

您已经非常清楚地描述了您的需求，但到目前为止，您自己编写的代码是什么？哪里不起作用？这就是问题所在，我尝试过各种不同的方法，但没有一种方法能满足我的需要。这就是为什么我想看看是否有一种方法可以用纯CSS实现这一点。开始时看起来很简单，但一旦你开始尝试，就很难完成。现在还在玩弄它，但想看看neone有没有什么建议。谁在“移除”盒子？谁在移除盒子并不重要。它应该是动态的，并且能够解释被移除的箱子。这就是挑战。也可以随意移动HTML。关闭，但不要抽雪茄。在您的示例中，您正在移除框C&D。我需要能够移除框B&C。您所做的在移除框B时有效，但在移除框C时无效。不过，谢谢，这比我所能做的更接近。也许应该更清楚哪些盒子可以被移除。@BenMarshall哦，没错。固定在中，但框F需要一个

min:height

才能在第一种情况下工作！无需使用空div即可完美工作。更少的代码就是漂亮的代码。谢谢你的帮助！非常接近。唯一的问题是，dummy定义了一个特定的高度。用它来为F框推送内容是个好主意，但F框的高度可能是可变的，这意味着.dummy需要是可变的。使其变为变量将破坏您在那里所做的工作。不过还是有一个！不确定这个问题是否有解决方案，但如果没有其他人提出，我将把这个问题标记为答案。@BenMarshall是的，

.dummy

div的高度必须固定。在我的第一把小提琴中，我将它设置为601px，但它可以更小：373px（盒子上的高度+边缘底部+1px），我将更新我的答案。

.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;
}

<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>

.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;
}