设置div宽度并调整大小，当它不适合屏幕上绝对定位div

我想设置一个固定的宽度为div，例如200px。我想div然后总是有200px，除非当前窗口没有足够的空间。设置div宽度并调整大小，当它不适合屏幕上绝对定位div

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可以做到这一点没有媒体查询，我正在寻找一个解决方案没有媒体查询，但我不知道这是否可能。

来源

2016-07-28 user4493177

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

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

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

来源

2016-07-28 11:10:16 Pete

，如果你想获得宽度内容遵循当前内容的宽度，你应该有宽度100％ SRY的英语不好这件事亘古不变的你选择什么样的位置类样式

来源

2016-07-28 11:08:45 Evinn

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

只需添加max-width:100%

来源

2016-07-28 11:09:16

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

#wrapper { 
    max-width: 200px; 
}

来源

2016-07-28 11:12:56 OscarAkaElvis

您需要添加另一个具有绝对位置的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>

来源

2016-07-28 11:52:15

设置div宽度并调整大小，当它不适合屏幕上绝对定位div

回答

相关问题