Question

在台式机上，我将div设置为显示为表格单元格，但在移动设备上将其更改为嵌入式块。我选择在桌面上使用表格单元，以便所有并排的块都具有相同的高度，而不管其内容的高度如何。我想对移动设备和台式机之间的窗口大小间隔使用相同的表格单元格方法，但要并排显示两个带分隔符的块（而不是四个带三个分隔符的并排块）。我想知道是否在每对“ responseelements”周围放置一个div并将每个div设置为内联（对于桌面）会导致页面呈现与不存在时不同。如果我没记错的话，那么我应该能够完成我打算做的事情，如果这不会引起问题。

@media (max-width: 1199px) {
  .responsiveelement {
    width: 100% !important;
    margin: 0 0 20px !important;
    display: inline-block !important;
  }
  .responsivetable {
    display: block !important;
    margin: 0 !important;
  }
  .celldivider {
    display: none;
  }
}

.celldivider {
  display: table-cell;
}

.responsiveelement {
  display: table-cell;
  width: 23.5%;
}

<div class="table">
  <div class="table2">
    <div class="responsiveelement"></div>
    <div class="celldivider"></div>
    <div class="responsiveelement"></div>
  </div>
    <div class="celldivider middle"></div>
  <div class="table2">
    <div class="responsiveelement"></div>
    <div class="celldivider"></div>
    <div class="responsiveelement"></div>
  </div>
</div>

Answer 1

如果我理解正确，那应该可以：

HTML

space

CSS

<div>
 <div class='mobile_tr'> 
 <div class='td'>Text</div>
 <div class='td'>Text</div>
 </div>
 <div class='mobile_tr'>
 <div class='td'>Text</div>
 <div class='td'>Text</div>
 </div>
</div>

基本上，您将所有“单元格”按2分组，然后将换行显示为div { display: table } .mobile_tr { display: inline-block; } .td { display: table-cell; } @media (max-width: 1199px) { .mobile_tr { display: block; } }元素，该元素使“单元格”可以串联成一行。当设备移动时，将换行显示为一个块，将下一个换行插入换行符。不幸的是，我没有唯一的CSS方式。

编辑：简而言之，没有：P您在正确的轨道上。：D

将tds嵌套在嵌入式div中会导致渲染问题吗？

1 个答案: