Question

假设我有两个div：

<div id="wrapper">
     <div id="text">Text!</div>
</div>

ID为“ wrapper”的div的最小宽度必须为其内容的宽度加上7px的值。最大宽度将为其内容的宽度加上15px。当无法设置最大宽度时，具有id“ wrapper”的div的宽度应该是响应性的，但是可以在允许的最小值和最大值之间设置一个值。我将如何使用CSS？（它可以是调整填充或宽度）。

我尝试使用flex css属性，例如：

flex: 0 1 10%;

它确实使宽度响应，但是我无法根据其内容的宽度加上像素数来定义最小值和最大值。

我尝试使用css的css函数进行填充，例如：

padding-right: clamp(7px, 50%, 15px);
padding-left: clamp(7px, 50%, 15px);

但是没有用。我该如何使用CSS？

Answer 1

使用伪元素模拟填充并考虑使用flexbox定义其大小。

调整屏幕大小以查看填充大小的变化：

#wrapper {
  display:inline-flex;
  max-width:100%;
}
#wrapper::before,
#wrapper::after {
  content:"";
  min-width:7px;
  width:15px;
  flex-shrink: 9999; /* to shrink faster than the text*/
  
  background:red; /* to illustrate*/
}

<div id="wrapper">
  <div id="text">some responsive Text here!</div>
</div>

响应填充/宽度取决于内容

1 个答案: