代码之家 › 专栏 › 技术社区 › Steve

css-display:表格单元格工作不正常

css

Steve · 技术社区 · 7 年前

我有:

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:

如何使每行的列高度相同?也就是说,如何使项目单元格的高度与右侧图像的高度相同,并与下方行的高度相同?

3 回复 | 直到 7 年前

manAbl 7 年前

我检查了你的网站,你可以通过改变下面的规则来解决它:

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

希望有帮助:)

hoangkianh 7 年前

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

A. N. SINHA 7 年前

浏览完你的网站后需要在你的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>