设置 div 宽度并在屏幕不适合绝对定位 div 时调整大小答案

【问题标题】：Set div width and resize when it doesn't fit on the screen for absolute positioned div设置 div 宽度并在屏幕不适合绝对定位 div 时调整大小
【发布时间】：2016-07-28 19:52:15
【问题描述】：

我正在尝试为 div 设置固定宽度，例如 200px。我希望 div 然后总是有 200px，除非当前窗口没有足够的空间。

div {
  border: 2px solid;
}
.fixedWidth {
  width: 200px;
  position: absolute;
}
.noWidth {
  position: absolute;
}

<div class="fixedWidth">
  lalala lala lalala lalala
</div>
<br />
<br />
<div class="noWidth">
  alala lala alal lala
</div>

那么当屏幕变小可以看到如下问题：

第一个 div 没有调整大小并且文本落在屏幕之外。

我注意到，我试图实现的行为基本上是普通 div 的最大宽度，但这不适用于绝对定位的 div。

因为对于普通的 div 可以在没有媒体查询的情况下执行此操作，所以我正在寻找没有媒体查询的解决方案，但我不确定这是否可行。

【问题讨论】：

标签： html css css-position

【解决方案1】：

您应该能够做到以下几点：

.fixedWidth {
    max-width:200px; 
    width: 100%;
 }

这意味着它是 200px 直到屏幕不够大

【讨论】：

【解决方案2】：

.fixedWidth {
  max-width: 100%;
  position: absolute;
  width: 200px;
}

只需添加max-width:100%

【讨论】：

【解决方案3】：

如果你想让内容的宽度跟随当前内容的宽度，你应该使类样式的宽度为 100% 抱歉英语不好不管你选择什么样的职位

【讨论】：

【解决方案4】：

试着把这个类放到固定宽度的元素上。

#wrapper {
   max-width: 200px;
}

【讨论】：

【解决方案5】：

您需要在具有绝对位置的div内添加另一个具有相对位置的div。

div {
  border: 2px solid;
}
.fixedWidth {
  position: absolute;
}
.sizefit{
  position:relative;
  max-width:200px;
  width:100%;
}
.noWidth {
  position: absolute;
}

<div class="fixedWidth">
<div class="sizefit">
 lalala lala lalala lalala
</div>
 
</div>
<br />
<br />
<div class="noWidth">
  alala lala alal lala
</div>

【讨论】：