是否有等于CSS中“初始宽度”的内容

时间:2019-08-19 14:24:43

标签: css responsive-design width

我想在div上设置宽度,以便在它最初显示时将其设置为某个固定值,我将其称为“初始宽度”。如果用户调整浏览器的大小以减小宽度,我希望div的宽度变小,但只能减小到最小宽度(可以用min-width设置)。我无法使用width规则来设置初始宽度,因为即使浏览器宽度变小,也无法将其固定在该宽度。

1 个答案:

答案 0 :(得分:1)

当然,只需使用max-width,它就不会扩展到一定的宽度:

element {
  max-width: 450px; /* 'initial width' */
  width: 100%;
  min-width: 100px; /* 'minimum width' */
}

示例:

.resizeable {
  height: 150px;
  width: 500px;
  background: lightgrey;
  padding: 5px;
  border: 2px solid black;
  resize: horizontal;
  overflow: auto;
}

.element {
  height: 100px;
  max-width: 350px;
  width: 100%;
  min-width: 100px;
  background-color: grey;
  border: 2px solid blue;
}
<div class="resizeable"> Resize me!
  <div class="element">
    content
  </div>
</div>