具有多个值的最小/最大宽度/高度

我想限制<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

具有多个值的最小/最大宽度/高度

回答

相关问题