假设我有两个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?
答案 0 :(得分:2)
使用伪元素模拟填充并考虑使用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>