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％;位置：绝对;右：0;顶部：0;

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

我的网站是Joomla！和Virtuemart网站，如果这有帮助。

Answer 1

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

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

你走在正确的轨道上;你需要稍微改进你的风格。

＆＃13;

.desc-text

＆＃13;

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;
}

＆＃13;

Answer 2

实际上兄弟div不会自动扩展，要么你需要使用JS或style="white-space:no-wrap"标签/ span来避免包装。

Div以适合父div高度 - 显示子项：table

2 个答案: