Создание 2-колоночного табличного макета с пустыми / отсутствующими ячейками с использованием div

Question

Я пытаюсь создать табличный макет с двумя столбцами, в котором только некоторые (несколько) ячеек содержат какие-либо данные. Около 50% -75% «ячеек» будут пустыми / не существуют, поэтому я хотел бы выполнить это, используя div, если это возможно.

Например, для следующего HTML:

<div id="wrapper">
    <div id="left">
        <div class="p1">l1</div>
        <div class="p3">l3</div>
        <div class="p4">l4</div>
        <div class="p5">l5</div>
    </div>
    <div id="right">
        <div class="p1">r1</div>
        <div class="p2">r2</div>
        <div class="p3">r3</div>
        <div class="p5">r5</div>
    </div>
</div>

«Ячейка» l1 должна находиться в том же вертикальном положении, что и r1, l3 как r3, l5 как r5, ​​например:

l1 r1
   r2
l3 r3
l4
l5 r5

Мне не удалось этого сделать, пока я пытался:

• Оболочка с положением: относительное, "ячейки" с положением: абсолютное и позиционирование их сверху: xxpx;
• поплавки

Но у меня ничего не работает. Есть ли способ сделать это, не заполняя все ячейки div, даже если они пустые? Это было бы действительно похоже на использование таблицы, которая является единственным решением, которое работает для меня на данный момент.

Answer 1

Последние браузеры. - Хосе Луис 8 минут назад

Cool. В этом случае я собираюсь предложить display: table-cell и друзей.

Это не будет работать в IE7, но это не будет проблемой, если вы заботитесь только о последних браузерах.

Мне не особо нравится "дивитус", но с этим мало что можно сделать.

JSFiddle

CSS

#wrapper { 
    border: solid 1px #0f0; 
    display: table 
}
#wrapper > div { 
    border: solid 1px #00f; 
    display: table-row 
}
#wrapper > div > div { 
    border: solid 1px #f00; 
    display: table-cell 
}

HTML

<div id="wrapper">
    <div>
        <div>l1</div>
        <div>r1</div>
    </div>
    <div>
        <div></div>
        <div>r2</div>
    </div>
    ..
</div>

---

Ячейки будут фиксированной ширины и высоты

В этом случае вы также можете рассмотреть что-то более простое и более близкое к тому, что у вас изначально было:

JSFiddle

CSS

#wrapper { 
    border: solid 1px #0f0; 
    background: #ccc; 
    float: left 
}
#left { 
    border: solid 1px #00f; 
    float: left 
}
#right { 
    border: solid 1px #f00; 
    float: left }
#left > div, #right > div {
    border: solid 1px #000;
    width: 50px;
    height: 50px
}

HTML

<div id="wrapper">
    <div id="left">
        <div>l1</div>
        <div></div>
        ..
    </div>

    <div id="right">
        <div>r1</div>
        <div>r2</div>
        ..
    </div>
</div>

---

Третья идея, специально предназначенная для:

Я пытался избежать <div></div> штуковина

Теперь вы можете опускать пустые ячейки.

Лично я предпочел бы просто мириться с пустыми div с, потому что это немного сложно.

Я прокомментировал, а не удалил "пустые ячейки".

JSFiddle

CSS

#wrapper {
    border: solid 1px #0f0;
    background: #ccc;
    float: left;
    width: 100px
}
#wrapper > div {
    outline: solid 1px #000;
    width: 50px;
    height: 50px
}

.l {
    float: left
}
.r {
    float: right;
}
.r + .r + .l {
    clear: right;
    background: red
}
.l + .l {
    clear: left;
    background: blue
}
.r + .r + .r {
    clear: right;
    background: #666
}

HTML

<div id="wrapper">
    <div class="l">l1</div>
    <div class="r">r1</div>

    <!--<div class="l">l2</div>-->
    <div class="r">r2</div>

    <div class="l">l3</div>
    <div class="r">r3</div>

    <div class="l">l4</div>
    <!--<div class="r">r4</div>-->

    <div class="l">l5</div>
    <div class="r">r5</div>

    <!--<div class="l">l6</div>-->
    <div class="r">r6</div>

    <!--<div class="l">l7</div>-->
    <div class="r">r7</div>

    <div class="l">l8</div>
    <div class="r">r8</div>

    <div class="l">l9</div>
    <!--<div class="r">r9</div>-->

    <div class="l">l10</div>
    <!--<div class="r">r10</div>-->

    <div class="l">l11</div>
    <div class="r">r11</div>
</div>

Это должен быть достаточно обширный тестовый пример HTML.

Answer 2

Я подумал, что это может быть хорошим комплиментом к ответу тридцатки .

Он использует угловое повторение ng, вот JSFiddle , основанное на его работе.

CSS

#wrapper {
    border: solid 1px #0f0;
    background: #ccc;
    float: left;
    width: 100px
}
#wrapper > div {
    outline: solid 1px #000;
    width: 50px;
    height: 50px
}
.l {
    float: left
}
.r {
    float: right;
}
.r + .r + .l {
    clear: right;
}
.l + .l {
    clear: left;
}
.r + .r + .r {
    clear: right;
}

_{Примечание: без изменений здесь}

HTML

<div id="wrapper" ng-controller="MainCtrl">
    <div ng-repeat="item in items track by item.order" ng-class="{l:item.order%2!=0,r:item.order%2==0}">{{item.id}}</div>
</div>

_{Я надеялся использовать ng-class-odd, но это всегда работает от $index независимо от отслеживания.}

JS

var app = angular.module ("app", []); app.controller ("MainCtrl", функция ($ scope) {

    $scope.items = [{
        id: 1,
        order: 1
    }, {
        id: 2,
        order: 2
    }, {
        id: 3,
        order: 3
    }, {
        id: 4,
        order: 7
    }, {
        id: 5,
        order: 9
    }, {
        id: 6,
        order: 10
    }, {
        id: 7,
        order: 12
    }, {
        id: 8,
        order: 14
    }, {
        id: 9,
        order: 16
    }, {
        id: 10,
        order: 17
    }, {
        id: 11,
        order: 18
    }];


});

_{На самом деле ваши данные будут более сложными, вероятно, поступят из $ rest или $ resource}

Надеюсь, это поможет любому, кто пытается сделать это под углом.