html - 适合父级 div 高度的 Div - 显示子级的位置 :table

Question

我正在尝试为我的产品制作一个响应式表格。

<div class="row-fluid">
    <div class="span6 desc-table">
        <div class="row-fluid">
            <div class="span6 desc-title-table"> <!-- display:table -->
                <span class="desc-title">Coverage:</span> <!-- display:table-cell -->
            </div>
            <div class="span6">
                <span class="desc-text">24sqm/Litre per coat</span>
            </div>
        </div>
    </div>
    ...

这是CSS

.desc-table{border:1px solid #4a4a4a;margin-bottom:5px;}
.desc-table .span6 {display:table;}
.desc-table span {display:table-cell;vertical-align:middle;}
.desc-table > .row-fluid > .span6 {padding:0px 5px 0px 5px;margin-left:0px;}
.desc-title {font-weight: bold;}
.desc-title-table {background-color:#4a4a4a; color:#fff;}

我遇到的问题是，如果一个 div 中的内容溢出到多行，则同级 div (span6) 不会扩展到相同的高度。

我试过:

• 高度:100%；
  
• 高度:100%；position:absolute；右:0；顶部:0；

div 是 display:table 所以我可以垂直对齐其中的文本。
Image of my problem

我的网站是 Joomla!如果有帮助，还有 Virtuemart 网站。

Answer 1

虽然您的问题不清楚您要完成什么，但我的猜测是您希望 .desc-title div 占据与相应描述相同的高度div .desc-text.

换句话说，您想要模仿垂直对齐的表格单元格的显示，其中两个单元格占据彼此相同的高度。

您走在正确的轨道上；你只需要稍微改进一下你的风格。

body {
  background: orange;
}
.wrapper {
  max-width: 500px;
  margin: 20px auto;
  background: green;
  display: table;
}
.desc-title {
  color: #fff;
}
.desc-table .row-fluid {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: table;
  width: 100%;
}
.desc-table .row-fluid > .span6 {
  width: 50%;
  padding: 10px;
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
}
.row-fluid > .span6:first-child {
  background: #4a4a4a;
}
.row-fluid > .span6:last-child {
  background: #fff;
}

<section class="wrapper">
  <div class="row-fluid">
    <div class="span6 desc-table">
      <div class="row-fluid">
        <div class="span6 desc-title-table">
          <!-- display:table -->
          <span class="desc-title">Coverage:</span>
          <!-- display:table-cell -->
        </div>
        <div class="span6">
          <span class="desc-text">24sqm/Litre per coat</span>
        </div>
      </div>
    </div>
    <div class="span6 desc-table">
      <div class="row-fluid">
        <div class="span6 desc-title-table">
          <!-- display:table -->
          <span class="desc-title">Drying Time:</span>
          <!-- display:table-cell -->
        </div>
        <div class="span6">
          <span class="desc-text">Approx. 8 – 10 hours in normal conditions.</span>
        </div>
      </div>
    </div>
  </div>
</section>