具有多個值的最小/最大寬度/高度

我想限制<div>的寬度不超過50%，和不超過200px。具有多個值的最小/最大寬度/高度

這意味着，當50%小於200px，它應該有相同的行爲max-width: 50%，否則其行爲變得max-width: 200px。

我如何定義這個用CSS？
（不min功能，尚未支持）

<div class="some_element">Text here</div> 
<style> 
.some_element { 
    background: red; 
    float: left; 
    width: auto; 
    max-width: 200px; 
    max-width: 50%; /* this will override previous one, but i want both of them work */ 
} 
</style>

來源

2015-06-01 tsh

根據http://caniuse.com/#feat=minmaxwh它有一些相當不錯的支持（最小寬度你談論） –

@DouwedeHaan是，這個功能是足夠老的廣泛支持。但它只接受一個價值。但我想要兩個。 – tsh

您可以嘗試爲下面提及

.some_element { 
    background: red; 
    float: left; 
    width: auto; 
    width: 50%; 
    max-width: 200px;   
}

來源

2015-06-01 08:03:51

寬度：自動在這裏沒有意義 –

對不起。你是對的，你可以刪除寬度：自動; –

再次檢查代碼 –

您不能設置最大寬度既200像素和50％。你可以把元素的另一個元素與400像素最大寬度：

<div id="parent"> 
    <div id="child">Text here</div> 
</div> 


#parent { 
    background-color: red; 
    max-width: 400px; 
} 
#child { 
    background-color: green; 
    max-width: 50%; 
}

來源

2015-06-01 08:12:22

爲什麼要編輯？前一個（'max-width：50％'）似乎是正確的，但不是這個？ – tsh

嗯，我把它放回去，寬度似乎更正確的我;） –

有關的圖像是什麼？我相信圖像不適合父母。 –

創建單獨的類，並將其添加動態基於outerWidth（）

.some_element { 
     background: red; 
     float: left; 
     width: auto; 
    } 

    .widthClass1{ 
    max-width:50%; 
    } 

    .widthClass2{ 
    max-width:200px; 
    } 


    $(document).ready(function(){ 
     if($("textDiv").outerWidth()<400){//instead of dividing by 2 I am comparing with 400 
     $("textDiv").addClass('widthClass1') 
     }else{ 
     $("textDiv").addClass('widthClass2') 
     } 
    });

來源

2015-06-01 08:23:57

使用javascript將永遠解決這樣的問題，就像'max-width：expression（Math.min（this.parentNode.clientWidth/2，200）+'px'）;'（代碼沒有測試過去）。但不斷更新這些元素的'classList'或'max-width'似乎太複雜了。即，當窗口大小，當顯示元素/隱藏...... – tsh

，你可以把所有這些寬度面向CSS功能於一體，可以在window.onresize做太多 –

<div id="parent"> 
    <div id="sub">test content</div> 
</div>

// CSS

#parent { 
    max-width: 200px; 
} 
#sub { 
    width: 50%; 
}

來源

2015-06-01 08:27:51

當頁面寬度小於或等於400像素可以說明這一點所需的規則爲50％最大寬度，以及200像素當頁面瓦特寬度大於或等於400像素。這聽起來很像媒體查詢！我第一次處理小屏幕的寬度，然後覆蓋較大的寬度，這是這個CSS：

.some_element { 
    background: red; 
    float: left; 
    width: auto; 
    max-width: 50%; 
} 
@media (min-width: 400px) { 
    .some_element { 
    max-width: 200px; 
    } 
}

如果你願意，你可以交換50%和200px，改變它的min-width到max-width。

來源

2017-05-02 03:27:23 misterhaan

具有多個值的最小/最大寬度/高度

回答

相關問題