Question

我有6个数据单元格，在中等+断点处，它们都在同一行和相同的高度;在小断点中，每行有3个，行内的所有内容都是相同的高度。

我最初尝试使用display: table-cell;，并且能够分别实现这两种方案，但需要更改标记。有没有办法让这种方法有效？

我知道flexbox可能是一个选项，但我无法使用它，因为我需要支持IE9。

想要在不使用任何JS的情况下解决这个问题。

tl; dr

连续3个单元格用于小视口
连续6个单元格用于中等视口
连续的所有单元格应该是相同的高度
动态高度，基于内容长度
没有JS - 仅限CSS / Markup。
支持IE9 +。

在小断点（每行3个）中工作：

.table {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  width: 16.66667%; /* 1/6 */
  border: 1px solid #000;
  text-align: center;
}

@media (max-width: 500px) {
  .cell {
    width: 33.33333%; /* 1/3 */
    background: #eee; /* Just to see when the breakpoint is applied */
  }
}

<div class="table">
  <div class="row">
    <div class="cell">Cell 1 Pellentesque pretium neque at lacinia faucibus.</div>
    <div class="cell">Cell 2</div>
    <div class="cell">Cell 3</div>
  </div>
  <div class="row">
    <div class="cell">Cell 4</div>
    <div class="cell">Cell 5</div>
    <div class="cell">Cell 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ornare mi. Ut convallis suscipit sapien, at feugiat tellus commodo nec.</div>
  </div>
</div>

适用于中等+断点（每行6个）：

.table {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  width: 16.66667%; /* 1/6 */
  border: 1px solid #000;
  text-align: center;
}

@media (max-width: 500px) {
  .cell {
    width: 33.33333%; /* 1/3 */
    background: #eee; /* Just to see when the breakpoint is applied */
  }
}

<div class="table">
  <div class="row">
    <div class="cell">Cell 1 Pellentesque pretium neque at lacinia faucibus.</div>
    <div class="cell">Cell 2</div>
    <div class="cell">Cell 3</div>
    <div class="cell">Cell 4</div>
    <div class="cell">Cell 5</div>
    <div class="cell">Cell 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ornare mi. Ut convallis suscipit sapien, at feugiat tellus commodo nec.</div>
  </div>
</div>

Answer 1

由于它是表格数据，我建议使用表格...

.table {
  width: 100%;
  border-collapse: collapse;
}

.cell {
  width: 16.66667%;
  border: 1px solid #00F;
  text-align: center;
}

@media (max-width: 500px) {
  .cell {
    width: 33.33333%; /* 1/3 */
    background: yellow; /* Just to see when the breakpoint is applied */
  }
}



<table class="table" >
  <tr class="row">
    <td class="cell">Cell 1 Pellentesque pretium neque</td>
    <td class="cell">Cell 2</td>
    <td class="cell">Cell 3</td>
  </tr>
  <tr class="row">
    <td class="cell">Cell 4</td>
    <td class="cell">Cell 5</td>
    <td class="cell">Cell 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ornare mi. Ut convallis suscipit sapien, at feugiat tellus commodo nec.</td>
  </tr>
</table>

jsFiddle

Answer 2

如果我理解正确这是你想要实现的......在这里我使用bootstrap listGrid概念来实现这一点。

 .cell {
   border: 1px solid #000;
   text-align: center;
   height: 200px;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="table">
  <div class="cell col-xs-4 col-sm-2">Cell 1 Pellentesque pretium neque at lacinia faucibus.</div>
  <div class="cell col-xs-4 col-sm-2">Cell 2</div>
  <div class="cell col-xs-4 col-sm-2">Cell 3</div>
  <div class="cell col-xs-4 col-sm-2">Cell 4</div>
  <div class="cell col-xs-4 col-sm-2">Cell 5</div>
  <div class="cell col-xs-4 col-sm-2">Cell 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ornare mi. Ut convallis suscipit sapien, at feugiat tellus commodo nec.</div>
</div>

注1：如果你不想使用bootstrap让我知道，我可以找到其他解决方案。

注2：Bootstrap为设备预先定义了pexels值，如果您想根据需要进行更改，可以http://getbootstrap.com/customize/

响应的相同高度元素行在小断点中分成两行

2 个答案: