css 在不使用显示的情况下禁用/空行：none

Question

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

这是我目前拥有的：

但这就是我试图更改 css 以实现的目标：

我无法更改 HTML（即 <.div.class='row'.> 必须保留在原位）因为 HTML 框架用于其他不同的css 风格。

我在调整 css 时遇到问题，因为我不确定如何将 css 应用于 <.div.class='row'.> 以便我需要的显示已经实现（如果我删除行div，我想要的显示就可以实现）。我已经尝试了很多东西，但对我来说没有任何效果。

是否可以更改 class 行以便实现所需的显示（如上所示）？ 或者我应该单独实现 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

将此用于第 class

行的元素

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

fiddle 只是把宽度搞乱了

Answer 2

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

您需要向行中添加 display:table 个单元格：

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

Answer 3

只需尝试 css 网格属性

css grid

或放

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

Answer 4

你的代码没问题。您只需要按应有的方式安排 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>

css 在不使用显示的情况下禁用/空行：none

css disable / null row without using display: none

html

css

layout