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

Question

2020 年编辑（最小值、最大值、钳位函数）

致所有通过搜索引擎来到这里的人：

CSS min / max / clamp 函数在最近的（2020 年）浏览器中得到了一些支持。你可以试试max-width: min(200px, 50%);。你可以看看这些 CSS 函数，同时注意兼容性问题。

---

原帖：

我想限制<div> 的宽度不超过50%，并且不超过200px。

也就是说，当50%小于200px时，它的行为应该和max-width: 50%一样，否则它的行为就变成max-width: 200px。

如何用 CSS 定义它？
（没有min function，尚不支持）

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

Answer 1

当页面宽度小于或等于 400 像素时，您可以将此期望的规则声明为最大宽度的 50%，当页面宽度大于或等于 400 像素时，您可以将其声明为 200 像素。这听起来很像媒体查询！我首先处理较小的屏幕宽度，然后覆盖较大的宽度，这就是这个 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。

Answer 2

您不能将最大宽度设置为 200 像素和 50%。您可以将该元素放在另一个最大宽度为 400px 的元素中：

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


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

Answer 3

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

// css

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

Answer 4

创建单独的类并根据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')
       }
    });

Answer 5

您可以尝试如下所述

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