在现代浏览器（IE8+；、FF3+；、Chrome 3+；等）中，是否可以创建纯CSS类来解决这个问题？

从上图中，我有3个CSS类（）用于此布局

黑盒类的父类

.parent
{
   width: 1000px;
   height: 90px;
}

红盒班大

.big
{
   width: 200px;
   height: 90px;
}

.small
{
   width: 200px;
   height: 30px;
}

小黄盒类

.big
{
   width: 200px;
   height: 90px;
}

.small
{
   width: 200px;
   height: 30px;
}

图1的HTML应该是这样的

<div class="parent">
   <div class="big"></div>
   <div class="big"></div>
   <div class="small"></div>
   <div class="small"></div>
   <div class="small"></div>
   <div class="big"></div>
   <div class="small"></div>
</div>

<div class="parent">
   <div class="big"></div>
   <div class="big"></div>
   <div class="small"></div>
   <div class="small"></div>
   <div class="big"></div>
   <div class="small"></div>
   <div class="small"></div>
</div>

图2的HTML应该是这样的

<div class="parent">
   <div class="big"></div>
   <div class="big"></div>
   <div class="small"></div>
   <div class="small"></div>
   <div class="small"></div>
   <div class="big"></div>
   <div class="small"></div>
</div>

<div class="parent">
   <div class="big"></div>
   <div class="big"></div>
   <div class="small"></div>
   <div class="small"></div>
   <div class="big"></div>
   <div class="small"></div>
   <div class="small"></div>
</div>

是否可以创建纯CSS类来解决这个问题而不修改HTML中的任何标记

---

谢谢，

是的，如果您确定所有维度（即它们不需要根据内容进行动态调整），则使用绝对定位非常简单：

.parent > * {
  position: absolute;
}

.big {
  top: 0;
}

.big + .big {
  left: 200px;
}

.big + .small {
  top: 0;
}

.big + .big + .small {
  left: 400px;
}

.big + .big + .small + .small {
  top: 30px;
  left: 400px;
}

.big + .big + .small + .small + .small {
  top: 60px;
  left: 400px;
}

.small + .big {
  left: 600px;
}

.small + .big + .small {
  left: 800px;
}

.small + .big + .small + .small {
  top: 30px;
  left: 800px;
}

---

但在大多数情况下，我不推荐它作为一个健壮的解决方案。如果您对HTML有更多的控制，并且可以在

.small

s周围添加一些包含

div

s的内容，那么您可以使用float做一些更健壮、更灵活的事情。

您可能会更幸运，因为我想您可能无法理解我的问题。我不想固定我的图1+2中任何框的位置，这些只是使用这种样式的示例。因此，可以将小盒子移动到第一个位置或将大盒子移动到最后一个位置。