Css 使用divs创建具有空白/缺少单元格的2列表格式布局

我正在尝试构建一个具有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>

我一直无法做到这一点，到目前为止，我已经尝试：

• 带位置的包装：相对，“单元”带位置：绝对，带顶部的定位：xxpx
• 漂浮

但对我来说什么都不管用。有没有办法在不填写所有div“单元格”的情况下做到这一点，即使它们是空的？这就像使用一张桌子，这是目前唯一对我有效的解决方案

最新浏览器何塞·路易斯8分钟 以前

酷。在这种情况下，我将建议

display:table cell

和friends

它在IE7中不起作用，但如果你只关心最新的浏览器，那就不会有问题

我并不特别喜欢“迪维图斯”，但对此我无能为力

CSS HTML HTML HTML

l1
r1
r2
l3
r3
l4
l5
r5
r6
r7
l8
r8
l9
l10
l11
r11

---

这应该是一个相当广泛的HTML测试用例。

我认为这可能是对的答案的一个很好的补充

它利用angular的ng repeat，这是基于他的工作的

CSS 注：这里没有变化

HTML 实际上，您的数据将更加复杂，可能来自$rest或$resource

---

希望这能帮助任何试图在angular中实现这一点的人。

您需要支持哪些浏览器？单元格的宽度/高度是否固定？你能用某种代码添加一个吗？（如果只是为了更容易理解你想做什么的话）@thirtydot这是一个例子，单元格在高度上位置正确，但两列都向左折叠。此外，由于位置的原因，包装高度不跨越单元格的高度：绝对；单元格的宽度和高度是固定的（尽管为了简单起见，示例中没有这些单元格）。最新的浏览器。我不想提出那个古老的争论，但这是--表格--布局。我的朋友，摆桌子是有原因的。很好，两个建议都很有效。然而，由于大多数单元格都是空白的（只有大约25%的单元格实际填充了数据），我试图避免使用与实际使用表格基本相同的内容。我在答案中添加了第三个候选项。结果发现第三个候选项有点问题。试试这个版本：-在说你对它满意之前确保你进行了广泛的测试：）我会试试，然后我会决定是否值得不使用表，因为显然在这种情况下，简单的解决方案（使用表）似乎是最好的。谢谢：）我似乎在这个问题上花了很长时间，但这里还有另一个选择：-它比我上一篇评论中的想法要简单得多，但每行需要额外的包装div。虽然你仍然可以省略空白的“单元格”。这个问题与盎格鲁JS完全无关。“Jos路易斯”我知道，但是当我发现你的问题（寻找如何在角度上做这件事）时，我必须找出答案。现在，我这个位置上的其他人就不必了。这根本不能成为这个问题的有效答案。

l1 r1
   r2
l3 r3
l4
l5 r5

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

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

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

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

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

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

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

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

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

    $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
    }];


});