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

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

当页面宽度小于或等于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 2

您不能将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 3

您可以尝试如下所述

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