我正在尝试将固定宽度设置为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可以在没有媒体查询的情况下执行此操作,我正在搜索没有媒体查询的解决方案,但我不确定这是否可行。
答案 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。
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;