html - 如何创建一个最大宽度的 div，包括响应式填充？

Question

我有一个div根据外部元素的宽度增长/缩小的，使用min-widthand max-width。我现在想为它添加填充div。填充应该与 div 内容的宽度相关，但显然填充是使用外部元素的宽度而不是div本身的宽度计算的。当将外部元素的可用宽度增加到超过max-width. div我的期望是填充将保持不变，但它会继续增长。

我相信我可以将div另一个包裹起来div并设置外部的宽度div和内部的填充div，但是有没有更清洁的方法，不需要第二个div？

#test {
  display: inline-block;
  box-sizing: border-box;
  min-width: 400px;
  max-width: 600px;
  padding: 5%;
  border: 1px solid #ff0000;
}

<div id="test">
  This block should have relative width based on the size of the outer element,
  but padding relative to its own width. Its width including padding shouldn't
  exceed 600px.
</div>

您需要使用片段的全屏视图并使用不同的窗口大小来查看上述效果。

标签： htmlcssresponsive-design

Answer 1

是的，你是对的，百分比填充始终基于容器的宽度。见官方定义。

解决方案：媒体查询。

#test {
  display: inline-block;
  box-sizing: border-box;
  min-width: 400px;
  max-width: 600px;
  padding: 20px;         /* 5% of 400 px, for narrow screens */
  border: 1px solid #ff0000;
}

@media screen and (min-width: 400px) {
#test {
  padding: 5%;         /* 5% of container width, for medium screens */
}

@media screen and (min-width: 600px) {
#test {
  padding: 30px;         /* 5% of 600px, for wide screens */
}

<div id="test">
  This block should have relative width based on the size of the outer element,
  but padding relative to its own width. Its width including padding shouldn't
  exceed 600px.
</div>