如何防止最小宽度覆盖最大宽度？

我已经创建了我想成为50％（为了讨论），但至少一定的宽度和至多100％的宽度，一个div（，使得它永远不会延伸的窗口）如何防止最小宽度覆盖最大宽度？

.about { 
    position:absolute; 
    right:0; 
    width: 50%; 
    min-width: 500px; 
    max-width: 100%; 
}

基本上，我想最小宽度的工作，但我希望最大宽度被认为是更重要的，以便它永远不会比窗口更宽，我假设我可以通过订单来做到这一点，或者至少通过使用！important ，但这似乎并没有被

https://jsfiddle.net/ex716kam/2/

来源

2015-06-21 MintWelsh

的'最小width'属性重写两个'MAX-width'和的值'width' 。了解更多[这里]（http://www.w3schools.com/cssref/pr_dim_min-width.asp）。 – lmgonzalves

好吧，我很困惑。你希望div是50％正确的。但是，“至少有一定的宽度”意味着不低于一定的宽度。对。那就是发生了什么，所以问题出在哪里。 –

所以，你希望你的div宽度至少为500px，但是不要超过窗口宽度？那么，如果窗口小于500像素会发生什么？它如何满足“至少500px宽”的条件？你的意图在逻辑上是有缺陷的。 – light

我已经给它试了几次的情况，但我似乎无法到m ake它只用CSS工作。我会建议使用简单的JavaScript或媒体查询，使其工作。

Working jsFiddle

@media screen and (min-width:1000px){ 
    .about{ 
     width:50%; 
    } 
}

注意什么@lmgonzalves写最小宽度为 “最强” ..

来源

2015-06-21 15:20:09

是的，我认为媒体查询会适用于这种情况，但是因为它的数字很好，所以很容易解决，也因为我使用％，但是如果单位是'他们'或什么的可能会多一点难。 – MintWelsh

有点奇怪的是，即使使用内联样式或重要标签，您也无法优先考虑最小宽度和最大宽度，如果可能的话，我宁愿不必过多使用媒体查询，但这似乎是最好的选择 – MintWelsh

代替max-width: 100%;使用max-width:100vw;。它不会离开你的窗户。

来源

2015-06-21 15:29:38

this看起来很有趣，但我只是试过了，它并没有解决问题，你能包括一个工作jsfiddle吗？ – MintWelsh

我在这里更改了你的CSS。只需使用这些单位聪明可以解决你的问题。 https://jsfiddle.net/shishirT20/ex716kam/7/ –

这是很难知道你1000像素之间预计下降至500像素什么样的行为，而是一个媒体查询是为了实现你在找什么最简单的方法：

.about { 
 
    position:absolute; 
 
    right:0; 
 
    width: 50%; 
 
    min-width:500px; 
 
} 
 

 
@media screen and (max-width: 500px){ 
 
    .about { 
 
    width: 100%; 
 
    min-width:0; 
 
    } 
 
}

<div class="about"> 
 
     <h1>About</h1> 
 
     <p> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </p> 
 
</div>

来源

2015-06-21 15:29:47

试试这个代码，当屏幕宽度将在500px到100％屏幕分辨率之间时，此代码将工作。

@media (min-width: 500px) and (max-width: 800px) 
{ 
.about { 
     position:absolute; 
     right:0; 
     width: 50%; 
    } 
}

来源

2015-06-21 15:39:18

https://jsfiddle.net/c7mLjfkn/ –

只需切换最小宽度和宽度的值：

.about { 
    position:absolute; 
    right:0; 
    width: 500px; 
    min-width: 50%; 
    max-width: 100%; 
}

https://jsfiddle.net/8fkbp9d0/

来源

2017-10-16 12:24:58

也许有点晚，但我希望我能帮助你:) –

如何防止最小宽度覆盖最大宽度？

回答

相关问题