css禁用/ null行而不使用display：none

Question

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

这就是我目前所拥有的：

但这就是我想要改变css来实现的目标：

我无法更改HTML（即＆lt; .div.class ='row'。＆gt;必须保持原位），因为HTML框架用于其他不同的CSS样式。

我无法适应css，因为我不确定如何将css应用于＆lt; .div.class ='row'。＆gt;这样就实现了我需要的显示（如果我删除行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

将此用于行类

的元素

display: inline-block;
vertical-align: top;

fiddle只是弄乱了宽度

Answer 2

小提琴：http://jsfiddle.net/6vote8pz/1/

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

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

Answer 3

你的代码很好。您只需按照应有的方式安排您的HTML代码。您可以在此处https://jsfiddle.net/h1e2nvb7/或以下查看：

<div class="wrapper">
<div class="row">
    <div class="heading">SUMMARY</div>
    <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>

Answer 4

只需尝试css网格属性

css grid

或 放

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