设置div宽度并在屏幕上不适合绝对定位div

时间:2016-07-28 11:06:38

标签: html css css-position

我正在尝试将固定宽度设置为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>

当屏幕变小时,可以看到以下问题:

Screencap

第一个div没有调整大小,文字也不在屏幕之外。

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

由于普通div可以在没有媒体查询的情况下执行此操作,我正在搜索没有媒体查询的解决方案,但我不确定这是否可行。

5 个答案:

答案 0 :(得分:2)

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

只需添加max-width:100%

答案 1 :(得分:2)

您应该能够执行以下操作:

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

这意味着在屏幕不够大之前它是200px

答案 2 :(得分:0)

如果你想让宽度内容跟随当前内容的宽度,你应该制作宽度为100%的类样式 不好的英语 你选择什么样的职位并不重要

答案 3 :(得分:0)

尝试将此类放入固定宽度元素。

#wrapper {
   max-width: 200px;
}

答案 4 :(得分:0)

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

&#13;
&#13;
div {
  border: 2px solid;
}
.fixedWidth {
  position: absolute;
}
.sizefit{
  position:relative;
  max-width:200px;
  width:100%;
}
.noWidth {
  position: absolute;
}
&#13;
<div class="fixedWidth">
<div class="sizefit">
 lalala lala lalala lalala
</div>
 
</div>
<br />
<br />
<div class="noWidth">
  alala lala alal lala
</div>
&#13;
&#13;
&#13;