如何使相邻的div与行中最高的div的高度匹配？

Question

如您所见，产品描述列值是两行，因此行取其高度。问题是相邻的div没有占用相同的高度，因此边界不完整，从下面的图像可以看到。全是迪夫。到桌子，td或tr。

表格

​

.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元素中使用floats。下面是一些正确的代码，向您展示如何使用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>

​