Question

我有：

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

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

如何在每行上使列高度相同？即如何使“项目”单元格与右侧图像的高度相同，对于它下面的行是否相同？

Answer 1

您可以使用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%;
    }

Answer 2

我检查了您的网站，您可以通过更改以下规则来解决此问题：

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

希望有帮助：）

Answer 3

在浏览完您的网站后，需要在您的css display: table-row

中进行小规模更新

我写了一些小代码片段可能真的有助于你解决问题：）

如果你想要代码将在特定的@viewport - 990px上运行：那么下面的代码将包含在@media (min-width: 990px) { }
支持的浏览器：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>

CSS - 显示：表格单元格无法正常工作

3 个答案: