Можно ли создать чистый класс CSS для решения этого вопроса в современном браузере (IE8 +, FF3 +, Chrome 3+ и т. Д.)?

Question

альтернативный текст http://img297.imageshack.us/img297/7632/cssmu.png

На рисунке выше у меня есть 3 CSS-класса () для использования в этом макете.

parent для класса черного ящика

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

большой для класса Red Box

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

small для класса желтого поля

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

HTML для рисунка1 должно быть таким.

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

И HTML для рисунка 2 должен быть таким:

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

Спасибо,

Answer 1

Да, если вы уверены во всех измерениях (т. Е. Им не нужно динамически настраиваться в зависимости от их содержимого), все это очень просто с использованием абсолютного позиционирования:

.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, и вы можете добавить некоторые из них, содержащие div s вокруг ваших .small s, вы можете сделать что-то гораздо более надежное и гибкое, используя float.