html - 如何让相邻的 div 与行中最高的 div 的高度相匹配？

Question

如您所见，产品描述列的值是两行，因此该行占它的高度。问题是相邻的 div 没有占据相同的高度，因此边框不完整，如下图所示。都是div。到表，td 或 tr。

Table

.row:before,
.row:after {
  content: "";
  display: table;
  clear: both;
}

.row:after {
  clear: both;
}

.row {
  zoom: 1;
}

.row.table {
  border-right: none;
}

div.table {
  border: 1pt solid black;
  border-bottom: 0;
}

div.table>[class*='col-'],
.colcell {
  border: 0;
  border-right: 1pt solid black;
  padding-left: 5pt;
  padding-top: 1pt;
  line-height: 9pt;
}

[class*='col-'] {
  float: left;
  height: 11pt;
  vertical-align: top;
  padding-right: 5px;
  height: 100%;
}

[class*='col-']:last-of-type,
.last {
  padding-right: 0;
}

.col-10-2 {
  width: 20%;
  float: left;
  padding-right: 1%;
}

.col-10 {
  width: 10%;
  float: left;
  padding-right: 1%;
}

.col-2 {
  width: 50%;
  float: left;
  padding-right: 1%;
}

<div class="row table header">
  <div class="colcell col-10">Qty</div>
  <div class="colcell col-10-2">SKU</div>
  <div class="colcell col-2">Product Description</div>
  <div class="colcell col-10">Unit Price</div>
  <div class="colcell col-10">Ext Price</div>
</div>
<div class="row table">
  <div class="colcell col-10">1</div>
  <div class="colcell col-10-2">020145</div>
  <div class="colcell col-2">Pok&#xe9;mon Folio Wallet iPhone 6 Case - JLRQ-PK-PB Pok&#xe9;mon Magnetic Folio Wallet</div>
  <div class="colcell col-10 price">$ 99.99</div>
  <div class="colcell col-10 price">$ 99.99</div>
</div>

Answer 1

这里的问题是在 display:table 元素中使用 float 。这是一些正确的代码，向您展示如何使用 css 显示表格、表格行和表格单元格创建表格。不需要花车。这是代码笔:https://codepen.io/anon/pen/JrRrbg

.table {
  display: table;
  border-collapse: collapse;
}
.row {
    display: table-row;
}
.row.header {
    font-weight:bold;
}
.colcell {
    display: table-cell;
    border: 1px solid black;
    padding-left: 5px;
}
.col-10-2 {
    width: 20%;
}
.col-10 {
    width: 10%;
    padding-right: 1%;
}
.col-2 {
    width: 50%;
    padding-right: 1%;
}

<div class="table">
  <div class="row header">
    <div class="colcell col-10">Qty</div>
    <div class="colcell col-10-2">SKU</div>
    <div class="colcell col-2">Product Description</div>
    <div class="colcell col-10">Unit Price</div>
    <div class="colcell col-10">Ext Price</div>
  </div>
  <div class="row">
    <div class="colcell col-10">1</div>
    <div class="colcell col-10-2">020145</div>
    <div class="colcell col-2">Pok&#xe9;mon Folio Wallet iPhone 6 Case - JLRQ-PK-PB Pok&#xe9;mon Magnetic Folio Wallet</div>
    <div class="colcell col-10 price">$ 99.99</div>
    <div class="colcell col-10 price">$ 99.99</div>
  </div>
</div>