設置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

回答

相關問題