Question

我希望将<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>

Answer 1

您无法将max-width设置为200px和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 2

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

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

5 个答案: