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

\“ Cell \” l1应该与r1，l3和r3，l5和r5处于相同的垂直位置，如下所示：

l1 r1
   r2
l3 r3
l4
l5 r5

我无法完成此操作，到目前为止，我已经尝试过：包装为position：relative的\“ cells \”为position：absolute，并以top：xxpx定位它们；漂浮但是没有任何东西对我有用。有什么办法可以在不实际填写所有div \“ cells \”的情况下即使它们为空？这实际上就像使用表格，这是目前唯一对我有用的解决方案。

已邀请:

2 个回复

蓟类

最新的浏览器。 –何塞·路易斯8分钟前凉。在这种情况下，我将建议display: table-cell和朋友。它将无法在IE7中使用，但是如果您只关心最新的浏览器，那将不是问题。我并不特别喜欢“ divitus”，但对此几乎无能为力。 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>

第三个想法，专门针对：我试图避开ѭ7 啄您现在可以省略空单元格。就我个人而言，我宁愿忍受空的8英镑，因为这有点复杂。我注释掉而不是删除“空单元格”。 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测试用例。

纤洞需匪

我认为这可能是对三十点答案的很好的补充。它基于他的工作，利用了angular的ng-repeat，这里是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 希望这对尝试按角度进行此操作的人有所帮助。

要回复问题请先登录或注册

使用divs创建带有空白/缺失单元格的2列表格状布局

2 个回复

发起人

position

html

tablelayout

css

问题状态

使用divs创建带有空白/缺失单元格的2列表格状布局

与内容相关的链接

2 个回复

发起人

position

html

tablelayout

css

问题状态