CSS响应式图片侧边栏布局实现与跨浏览器兼容性问题求解

问题一：800px~1100px视口区间右侧空白修复 #

推荐用display: grid实现，代码配置如下：

• 给card容器设置grid布局规则：

.card {
  display: grid;
  /* 图片列最小可缩到0，最大为图片原始宽度800px；侧边栏固定300px宽度 */
  grid-template-columns: minmax(0, 800px) 300px;
  /* 自动适配内容宽度，最大不超过视口宽度，水平居中 */
  width: fit-content;
  max-width: 100vw;
  margin: 0 auto;
}

• 给图片设置自适应规则，避免溢出：

.card img {
  width: 100%;
  height: auto;
}

该配置下，当视口宽度小于1100px时，侧边栏会自动换行到图片下方，grid容器宽度会自动匹配上一行的图片宽度，不会出现多余空白，同时保持水平居中。
如果要使用flex实现，配置如下：

.card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  max-width: 100vw;
  margin: 0 auto;
}
/* 图片外层容器如果没有可以直接给img加 */
.card .img-wrapper {
  flex: 1 1 800px;
  max-width: 800px;
}
.card aside {
  flex: 0 0 300px;
}

问题二：火狐浏览器fit-content居中失效修复 #

该问题是火狐对标准width: fit-content的实现兼容问题，需要添加火狐私有前缀兜底，或者替换实现方案规避属性兼容问题。

方案1：加前缀适配 #

直接修改card的width属性即可：

.card {
  width: -moz-fit-content;
  width: fit-content;
}

方案2：替换居中逻辑规避兼容问题 #

给card父容器设置text-align: center，将card改为inline级的grid/flex容器，不需要依赖fit-content属性，全浏览器兼容：

/* 这里的父容器根据你的实际结构调整，比如是body或者外层的包裹div */
.card-parent {
  text-align: center;
}
.card {
  display: inline-grid; /* 用flex的话就写inline-flex */
  grid-template-columns: minmax(0, 800px) 300px;
  max-width: 100vw;
  text-align: left; /* 复位内部文本对齐方式，避免继承父容器的center */
  margin: 0; /* 原来的auto margin可以去掉了 */
}

内容的提问来源于stack exchange，提问作者Alexander Mihailov