显示:表格单元不能正常工作。

I have:

我有:

HTML:

<div class="et_pb_row et_pb_row_1">
    <div class="et_pb_column et_pb_column_1_2 et_pb_column_3    et_pb_css_mix_blend_mode_passthrough">
        <div class="et_pb_module et_pb_text et_pb_text_1 et_pb_bg_layout_dark  et_pb_text_align_left">
        </div>
    </div>              
    <div class="et_pb_column et_pb_column_1_2 et_pb_column_4    et_pb_css_mix_blend_mode_passthrough et-last-child">
        <div class="et_pb_module et_pb_text et_pb_text_2 et_pb_bg_layout_light  et_pb_text_align_left">
        </div>
    </div>      
</div>

CSS:

.home .et_pb_section_3.full-width-row .et_pb_row {
    display: table;
}
.home .et_pb_section_3.full-width-row .et_pb_row .et_pb_column {
    display: table-cell;
}

However, the 2nd column is not the same height as the first column @ viewport width 990px:

但是，第二列与第一列的高度不同，第一列@ viewport width 990px:

How do I make the column heights the same on each row? i.e. how do I make the Projects cell the same height as the image to the right, and the same for the row below it?

如何使每一行的列高相等?例如，如何使项目单元格的高度与右边的图像相同，以及下面的行相同?

3 个解决方案

#1

I inspected your site and you can solve it by changing the following rules:

我检查了你的站点，你可以通过以下规则来解决:

 @media (min-width: 981px) {    
    .home .et_pb_section_3.full-width-row .et_pb_row {
        display: flex;
        flex-flow: row nowrap; // this way they won't collapse 
    }

    .full-width-row .et_pb_module {
        height: 100%;
    }

Hope helps :)

希望帮助:)

#2

You can use display: flex instead of display: table.

您可以使用display: flex代替display: table。

 @media (min-width: 981px) {    
    .home .et_pb_section_3.full-width-row .et_pb_row {
        display: flex;
        flex-direction: row;
    }

    /* You can ignore .et_pb_column */
    .home .et_pb_section_3.full-width-row .et_pb_row .et_pb_column {
        display: block 
    }

    .full-width-row .et_pb_module {
        height: 100%;
    }

#3

After go through your web sites need to small update in your css display: table-row

浏览完web站点后，需要在css显示中进行小的更新:table-row

I have written small code snippet might be it's really help you to solve your's problem :)

我写了一个小的代码片段，也许它真的能帮你解决你的问题:)

if you want the code will be run on particular @viewport - 990px: then below code will wrap inside @media (min-width: 990px) { }
如果您想让代码运行在特定的@viewport - 990px:下面的代码将在@media (min-width: 990px){}中
Supported Browsers : Chrome, Mozila, Safari, Edge, IE-8 and above
支持的浏览器:Chrome、Mozila、Safari、Edge、IE-8及以上

.home .et_pb_section_3.full-width-row .et_pb_row {
    display: table-row;
    background-color: #ff0000;
}
.home .et_pb_section_3.full-width-row .et_pb_row .et_pb_column {
    padding: 20px;
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}

<div class="home">
  <div class="et_pb_section_3 full-width-row">
    <div class="et_pb_row et_pb_row_1">
      <div class="et_pb_column et_pb_column_1_2 et_pb_column_3    et_pb_css_mix_blend_mode_passthrough">
        <div class="et_pb_module et_pb_text et_pb_text_1 et_pb_bg_layout_dark  et_pb_text_align_left">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent orci nunc, euismod eu imperdiet a, aliquet ut turpis. Nulla nec nisi sit amet mi consequat elementum. Nulla at lacus eget augue pretium auctor.
        </div>
      </div>
      <div class="et_pb_column et_pb_column_1_2 et_pb_column_4    et_pb_css_mix_blend_mode_passthrough et-last-child">
        <div class="et_pb_module et_pb_text et_pb_text_2 et_pb_bg_layout_light  et_pb_text_align_left">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent orci nunc, euismod eu imperdiet a, aliquet ut turpis. Nulla nec nisi sit amet mi consequat elementum. Nulla at lacus eget augue pretium auctor. Nulla vulputate tincidunt tortor, quis molestie
          risus dictum quis. Nunc vel dolor eleifend, suscipit ex eget, ullamcorper felis. Etiam vitae magna massa. Fusce porttitor enim leo, non interdum dolor porta et.
        </div>
      </div>
    </div>
  </div>
</div>

#1