小编Rus*_*orn的帖子

在响应式网格上设置“相同高度”行部分的唯一 CSS 解决方案

想要：一个 CSS 唯一的解决方案，可以在每行的基础上启用等高的网格“部分”，这也是响应式的。

这张图有望比这篇文章中的文字更好地解释要求：

有用的图表

“项目网格”应该是响应式的——因为它可以根据视口宽度显示每行不同数量的卡片。并且在给定的行内，等效部分应该在“每行”的基础上具有相同的高度。

在下面的 HTML 和 CSS 中 - 项目卡被分成我们需要的行（在两个示例断点桌面和移动），但内容部分的高度是可变的（糟糕）：

.items {
  max-width: 1200px;
}

.item {
  width: 25%;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding: 0 12px;
  margin: 24px -4px 24px 0;
}

@media (max-width: 600px) {
  .item {
    width: 50%;
  }
}

.item__heading {
  background-color: #d4d0f5;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

.item__content {
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__price {
  background-color: #e0f6d9;
  padding: 10px;
  text-align: …

Run Code Online (Sandbox Code Playgroud)

html css flexbox css-grid

Rus*_*orn

2017 05-23

5
推荐指数

1
解决办法

2699
查看次数

仅CSS解决方案在响应网格上设置MULTIPLE"相同高度"行部分

通缉:一种仅限CSS的解决方案,可以在每行的基础上启用MULTIPLE相等高度的网格"部分",这也是响应式的.

注意:这是这个问题的后续问题,每个项目只有一个"相等高度"部分 - 可以通过flexbox实现

下图应该有助于解释要求:

"项目网格"应该是响应式的 - 因为它可以根据视口宽度显示每行不同数量的卡片(桌面上4个,移动设备上2个).在给定的行中,等效的"内容"和"特征"部分应具有相同的高度.

在下面的HTML和CSS中 - 项目卡分为我们需要的行(在桌面和移动设备的两个示例断点处),但内容部分高度是可变的:

.items {
  max-width: 1200px;
}

.item {
  width: 25%;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding: 0 12px;
  margin: 24px -4px 24px 0;
}

@media (max-width: 600px) {
  .item {
    width: 50%;
  }
}

.item__heading {
  background-color: #d4d0f5;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

.item__content {
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__features {
  padding: 10px; …

Run Code Online (Sandbox Code Playgroud)

html css flexbox css-grid

Rus*_*orn

lucky-day

3
推荐指数

1
解决办法

1585
查看次数