Question

我有一个div，它根据外部元素的宽度使用min-width和max-width进行增长/收缩。现在，我想向该div添加填充。填充应该相对于div内容的宽度，但是显然填充是使用外部元素的宽度而不是div本身的宽度来计算的。当将外部元素的可用宽度增加到max-width的{{1}}之后，这是可见的。我的期望是，填充将保持不变，但会继续增长。

我相信我可以将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;
}

您需要使用摘要的全屏视图，并以不同的窗口大小来播放，以查看所提到的效果。

Answer 1

是的，是的，填充百分比始终基于容器的宽度。参见official definition。

解决方案：媒体查询。

#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>

如何创建具有最大宽度（包括响应填充）的div？

1 个答案: