Kindlegen环境下不支持max-width的HTML/CSS替代方案问询

嘿，这个问题我太熟悉了——Kindlegen的CSS支持确实有点让人头疼，尤其是不支持max-width这种常用属性的时候。不过别担心，我们完全可以用纯HTML/CSS的技巧来实现你要的效果，不需要任何JavaScript。

核心思路 #

我们可以利用父容器的左右内边距，巧妙模拟max-width的行为：当视口宽度大于你想要的固定宽度时，通过计算出的内边距把目标元素“挤压”到指定宽度；当视口变窄到小于这个宽度时，内边距自动归零，元素就会随视口收缩。

代码实现 #

只需要给需要控制宽度的元素套一层父容器，然后设置对应的样式即可：

针对你的.outside元素（目标宽度14em） #

先修改HTML结构，增加一个父容器：

<div class="outside-wrapper">
  <div class="outside">
    <!-- 这里放置你的内容 -->
  </div>
</div>

然后写CSS：

/* 父容器：通过padding限制子元素的最大宽度 */
.outside-wrapper {
  /* 计算左右padding：(视口总宽度 - 目标宽度)/2，让子元素刚好保持14em宽 */
  padding: 0 calc((100% - 14em) / 2);
}

.outside {
  width: 100%; /* 子元素占满父容器的可用空间 */
  background: orange;
}

针对你的.inside元素（目标宽度24em） #

同样的逻辑，套一个父容器就行：

<div class="inside-wrapper">
  <div class="inside">
    <!-- 这里放置你的内容 -->
  </div>
</div>

对应的CSS：

.inside-wrapper {
  padding: 0 calc((100% - 24em) / 2);
}

.inside {
  width: 100%;
  /* 你的其他样式 */
}

为什么这个方法有效？ #

• 当视口宽度大于目标宽度（比如14em）时，calc((100% - 14em)/2)会得到正数，父容器的左右padding会把内部的.outside元素牢牢限制在14em宽，完全达到你要的固定宽度效果。
• 当视口宽度小于目标宽度时，100% - 14em会变成负数，而CSS不允许负的padding，浏览器会自动把它解析为0，这时候.outside就会占满整个视口宽度，实现随视口收缩的需求。

备选方案（依赖媒体查询） #

如果测试后发现你的Kindlegen版本支持媒体查询，那这个写法会更简洁，不需要额外的父容器：

.outside {
  width: 14em;
  background: orange;
}

/* 当视口宽度小于14em时，切换为全屏宽度 */
@media (max-width: 14em) {
  .outside {
    width: 100%;
  }
}

同样，.inside元素也可以用这个逻辑修改样式。

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