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

Я пытаюсь построить табличный макет с 2 столбцами, где только некоторые (несколько) из ячеек имеют какие-либо данные. Около 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, даже если они пустые? Это действительно было бы похоже на использование таблицы, которая является единственным решением, которое работает для меня на данный момент.

Источник

2 ответа

Решение

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

Здорово. В этом случае я собираюсь предложить 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.

Источник

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

Он использует угловое повторение, вот 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;
}

NB: здесь без изменений

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 или $ ресурса

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

Источник
Другие вопросы по тегам