如何使边框崩溃（在div上）？

假设我有标记，如：http://jsfiddle.net/R8eCr/1/如何使边框崩溃（在div上）？

<div class="container"> 
    <div class="column"> 
     <div class="cell"></div> 
     <div class="cell"></div> 
     <div class="cell"></div> 
    </div> 
    <div class="column"> 
     <div class="cell"></div> 
     <div class="cell"></div> 
     <div class="cell"></div> 
    </div> 
    <div class="column"> 
     <div class="cell"></div> 
     <div class="cell"></div> 
     <div class="cell"></div> 
    </div> 
    ... 
</div>

然后CSS

.container { 
    display: table; 
    border-collapse: collapse; 
} 
.column { 
    float: left; 
    overflow: hidden; 
    width: 120px; 
} 
.cell { 
    display: table-cell; 
    border: 1px solid red; 
    width: 120px; 
    height: 20px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

我有display: table; border-collapse: collapse;和细胞display: table-cell外层的div为什么他们还没有崩溃？我在这里错过了什么？

顺便说一下，在一列中可能有不定数量的单元格，所以我不能只在一边有边框。

来源

2013-07-29 Jiew Meng

嗯，你为什么不使用''

和朋友表？ –

@ muistooshort，cos可能有不定数量的单元格，我宁愿不在特定设计中有空单元格 –

相关：http://stackoverflow.com/questions/5737693/simulating-border-collapse-in-lists-no -tables –

回答

这里是一个demo

首先你需要纠正你的语法错误，其

display: table-cell;

不diaplay: table-cell;

.container { 
    display: table; 
    border-collapse:collapse 
} 
.column { 
    display:table-row; 
} 
.cell { 
    display: table-cell; 
    border: 1px solid red; 
    width: 120px; 
    height: 20px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

来源

2013-07-29 04:08:42 Hushme

嗯，在实际的代码中，我确实有拼写正确的......嗯......我想它一定是其他东西在实际的代码那不工作......我会试图找出可能造成什么这 –

我纠正了我的错误其真正的我检查了你的答案，但我删除浮动：左，宽度和高度，我已经知道关于边界单元格 – Hushme

@Hushme是啊许多人知道，但有时挂断小问题，没有？反正继续下去，我没问题。 –

您需要使用display: table-row而不是float: left;将您的列，显然如@Hushme将您的diaplay: table-cell更正为display: table-cell;

.container { 
    display: table; 
    border-collapse: collapse; 
} 
.column { 
    display: table-row; 
    overflow: hidden; 
    width: 120px; 
} 
.cell { 
    display: table-cell; 
    border: 1px solid red; 
    width: 120px; 
    height: 20px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

demo

来源

2013-07-29 04:16:33

在这里检查我已经在使用的链接，但我忘记删除浮动：left http://jsfiddle.net/R8eCr/2 /看到链接号码 – Hushme

是的，没关系。只是如此接近。 –

使用简单负余量而不是使用显示表。

在拨弄 JS Fiddle

.container { 
    border-style: solid; 
    border-color: red; 
    border-width: 1px 0 0 1px; 
    display: inline-block; 
} 
.column { 
    float: left; overflow: hidden; 
} 
.cell { 
    border: 1px solid red; width: 120px; height: 20px; 
    margin:-1px 0 0 -1px; 
} 
.clearfix { 
    clear:both; 
}

来源

2014-03-25 22:43:04 gviswanathan

这太棒了！ - 卫生和简易。并且它保留了列的概念，Hushme和C-link都在他们的解决方案中破碎了。 – Superole

非常优雅，谢谢！ – Richard

这非常聪明:) – kavare

更新，而不是使用border使用box-shadow：

box-shadow: 
    2px 0 0 0 #888, 
    0 2px 0 0 #888, 
    2px 2px 0 0 #888, /* Just to fix the corner */ 
    2px 0 0 0 #888 inset, 
    0 2px 0 0 #888 inset;

演示：http://codepen.io/Hawkun/pen/rsIEp

来源

2015-03-02 10:40:54 user1032559

这实际上是我找到的最佳解决方案。如果您的数据是动态生成的，并且它不能保证完美，那么我们可以对问题进行排序。让我们假设网格中有9个项目，但是如果您有其他解决方案，那么您会缺少边框。做得好！ – Unsparing

对于响应式布局的好技巧，避免更改显示属性。 – kosmos

非常棒的解决方案！ – banesto

为什么不使用大纲？这是你想要的 提纲：1px纯红色;

来源

2016-10-21 04:50:51 Muslimbek

在解决当前问题时添加一些解释和回答如何解决这个问题的答案 –

这里我展示了许多边界折叠的变体。（使用Bootstrap网格）：http://codepen.io/leonardo1024/pen/KgbNGr – Muslimbek

您还可以使用负边距：

.column { 
 
    float: left; 
 
    overflow: hidden; 
 
    width: 120px; 
 
} 
 
.cell { 
 
    border: 1px solid red; 
 
    width: 120px; 
 
    height: 20px; 
 
    box-sizing: border-box; 
 
} 
 
.cell:not(:first-child) { 
 
    margin-top: -1px; 
 
} 
 
.column:not(:first-child) > .cell { 
 
    margin-left: -1px; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    </div> 
 
</div>

来源

2017-01-25 07:16:49 mpen

我使用了相同的方法，只用'border-top/left：0;'。边距创建抵消。 –

@ toster-cx我想这比重叠边界更好。好想法：-） – mpen

如何使边框崩溃（在div上）？

回答

相关问题