如何防止最小寬度覆蓋最大寬度？

我已經創建了我想成爲50％（爲了討論），但至少一定的寬度和至多100％的寬度，一個div（，使得它永遠不會延伸的窗口）如何防止最小寬度覆蓋最大寬度？

.about { 
    position:absolute; 
    right:0; 
    width: 50%; 
    min-width: 500px; 
    max-width: 100%; 
}

基本上，我想最小寬度的工作，但我希望最大寬度被認爲是更重要的，以便它永遠不會比窗口更寬，我假設我可以通過訂單來做到這一點，或者至少通過使用！important ，但這似乎並沒有被

https://jsfiddle.net/ex716kam/2/

來源

2015-06-21 MintWelsh

的'最小width'屬性重寫兩個'MAX-width'和的值'width' 。瞭解更多[這裏]（http://www.w3schools.com/cssref/pr_dim_min-width.asp）。 – lmgonzalves

好吧，我很困惑。你希望div是50％正確的。但是，「至少有一定的寬度」意味着不低於一定的寬度。對。那就是發生了什麼，所以問題出在哪裏。 –

所以，你希望你的div寬度至少爲500px，但是不要超過窗口寬度？那麼，如果窗口小於500像素會發生什麼？它如何滿足「至少500px寬」的條件？你的意圖在邏輯上是有缺陷的。 – light

我已經給它試了幾次的情況，但我似乎無法到m ake它只用CSS工作。我會建議使用簡單的JavaScript或媒體查詢，使其工作。

Working jsFiddle

@media screen and (min-width:1000px){ 
    .about{ 
     width:50%; 
    } 
}

注意什麼@lmgonzalves寫最小寬度爲「最強」 ..

來源

2015-06-21 15:20:09

是的，我認爲媒體查詢會適用於這種情況，但是因爲它的數字很好，所以很容易解決，也因爲我使用％，但是如果單位是'他們'或什麼的可能會多一點難。 – MintWelsh

有點奇怪的是，即使使用內聯樣式或重要標籤，您也無法優先考慮最小寬度和最大寬度，如果可能的話，我寧願不必過多使用媒體查詢，但這似乎是最好的選擇 – MintWelsh

代替max-width: 100%;使用max-width:100vw;。它不會離開你的窗戶。

來源

2015-06-21 15:29:38

this看起來很有趣，但我只是試過了，它並沒有解決問題，你能包括一個工作jsfiddle嗎？ – MintWelsh

我在這裏更改了你的CSS。只需使用這些單位聰明可以解決你的問題。 https://jsfiddle.net/shishirT20/ex716kam/7/ –

這是很難知道你1000像素之間預計下降至500像素什麼樣的行爲，而是一個媒體查詢是爲了實現你在找什麼最簡單的方法：

.about { 
 
    position:absolute; 
 
    right:0; 
 
    width: 50%; 
 
    min-width:500px; 
 
} 
 

 
@media screen and (max-width: 500px){ 
 
    .about { 
 
    width: 100%; 
 
    min-width:0; 
 
    } 
 
}

<div class="about"> 
 
     <h1>About</h1> 
 
     <p> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </p> 
 
</div>

來源

2015-06-21 15:29:47

試試這個代碼，當屏幕寬度將在500px到100％屏幕分辨率之間時，此代碼將工作。

@media (min-width: 500px) and (max-width: 800px) 
{ 
.about { 
     position:absolute; 
     right:0; 
     width: 50%; 
    } 
}

來源

2015-06-21 15:39:18

https://jsfiddle.net/c7mLjfkn/ –

只需切換最小寬度和寬度的值：

.about { 
    position:absolute; 
    right:0; 
    width: 500px; 
    min-width: 50%; 
    max-width: 100%; 
}

https://jsfiddle.net/8fkbp9d0/

來源

2017-10-16 12:24:58

也許有點晚，但我希望我能幫助你:) –

如何防止最小寬度覆蓋最大寬度？

回答

相關問題