html - css 禁用/空行而不使用显示 : none

Question

我有一系列用于以表格方式显示数据的 div。

这是我目前拥有的:

但这就是我试图通过更改 css 来实现的:

我无法更改 HTML(即 <.div.class='row'.> 必须保留在原位)，因为 HTML 框架用于其他不同的 css 样式。

我在调整 css 时遇到问题，因为我不确定如何将 css 应用到 <.div.class='row'.> 以便实现我需要的显示(如果我删除行 div，我想要的显示已实现)。我尝试了很多方法，但对我没有任何作用。

是否可以更改类行以便实现所需的显示(如上所示)？或者我应该实现单独的 HTML 代码来解决这个问题吗？我想我应该问一下，因为这会节省很多时间和精力 - 只是不确定是否可以完成。

这是我的 HTML 代码:

    .wrapper{
        border-spacing: 1px 1px;
        display: table;
        width: 100%;
    }
    
    .row{
        display: table-row;
    }
    
    .heading {
        display: table-cell; 
        width: 18%; 
        background-color: #000; 
        color: #fff; 
        font-weight: bold; 
        vertical-align: top;
    }
    
    .content {
        display: table-cell; 
        width: 98%; 
        padding: 2px; 
        vertical-align: top;
    }

 <div class="wrapper">
        <div class="row">
            <div class="heading">SUMMARY</div>
        </div>
        <div class="row">
            <div class="content">
                This is a test of the summary details. This is a test of the summary details. This is a test of the summary details. This is a test of the summary details. This is a test of the summary details. This is a test of the summary details.<br /><br />
                This is a test of the summary details. This is a test of the summary details. This is a test of the summary details. This is a test of the summary details. This is a test of the summary details. This is a test of the summary details. This is a test of the summary details. This is a test of the summary details. This is a test of the summary details. This is a test of the summary details.
            </div>
        </div>
    </div>

Answer 1

fiddle :http://jsfiddle.net/6vote8pz/1/

您需要将 display:table-cell 添加到行中:

.row{
    display: table-cell;
    vertical-align:top;
}