时间戳

首页 > 解决方案 > 带有固定元素的响应列

html - 带有固定元素的响应列

问题描述

我正在尝试创建一组列，使用 css 从三列优雅地降级为一列。通常我会这样做，但要求是每列中的项目应保持固定大小，并且列之间应始终保持 16px 的间距。

这是我正在寻找的：

在此处输入图像描述

但是，当我向列添加宽度属性时，它们之间的间距会变得更大。我对如何在屏幕更改大小时保持列相同感到困惑。我知道不可避免地越小，我将不得不使用媒体查询更改列宽，以使它们变成两列，然后变成一列，所以这不是问题。

这是我在列上设置宽度时列间距发生的情况的图片： 在此处输入图像描述

哦，当然，这是代码，还有一个codepen 链接。我建议使用 SO 编辑器全屏运行它，因为我没有做过任何响应式 css，所以这些列只是浓缩成一个大块，很难看到发生了什么。

body {
  margin: 0;
  padding: 40px;
}

.row {
  display: flex;
}

.tile {
  width: 300px;
  height: 300px;
  background-color: #ddd;
  margin-right: 8px;
  margin-left: 8px;
}

.col {
  width: 33.33%;
}
<div class="row">
  <div class="col">
    <div class="tile"></div>
  </div>

  <div class="col">
    <div class="tile"></div>
  </div>

  <div class="col">
    <div class="tile"></div>
  </div>
</div>

标签： htmlcssresponsive-design

解决方案

我认为这就是最终样式的样子：

body {
  margin: 0;
  padding: 40px;
}

.row {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.tile {
  width: 300px;
  height: 300px;
  background-color: #ddd;
}

我还在这里编辑了codepen https://codepen.io/tobycodes/pen/xxrEgje。

诀窍是justify: center;和gap: 16px;。您可以在此处阅读有关该gap属性的更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/gap 。该属性是grid-gapflexbox 的简写，但非常适合。

推荐阅读