是否有相当于css中的“初始宽度”的东西

Posted 2023-03-06

【中文标题】是否有相当于css中的“初始宽度”的东西

【英文标题】：Is there something equivalent to an "initial width" in css

【发布时间】：2019-12-24 18:58:10

【问题描述】：

我想在div 上设置宽度，这样当它最初显示时，它会被设置为某个固定值，我称之为“初始宽度”。如果用户调整浏览器的大小以缩小宽度，我希望div 的宽度变小，但只能达到最小宽度（可以使用min-width 设置）。我不能使用width 规则来设置初始宽度，因为即使浏览器宽度变小，它也会保持在该宽度。

【问题讨论】：

您可以使用基于百分比的值，或使用计算函数

使用%的宽度解决了吗？

【参考方案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>

【讨论】：

我确实这样做了，但没有奏效。你和我的唯一区别是我的内容 div 是一个带有列的 flex，它的宽度设置为 100%。此外，我调整大小的 div 也是一个带有列的 flex。只有在删除内容 div 的 flex 宽度后，它才起作用。谢谢！