我如何使用变量ammount inline-block div来覆盖屏幕的100％？

我有一些div应该有最小宽度和最大宽度，并且也是内联块，并且应该始终覆盖屏幕的100％。问题是，我不知道要在宽度部分指定什么，以使div始终覆盖100％，例如，如果我有5个div，最大宽度为400，最小宽度为300，覆盖20％每个屏幕，当我到1500px的屏幕，一个div应该下来，但其他div应该保持在300px。我知道它是因为我指定的宽度为20％，但我无法找到如何使它们自动增长以覆盖屏幕达到1500像素时的100％，我需要每个像素为375像素，这意味着它们应该是总宽度的25％，直到屏幕达到1200px，然后重复。我如何使用变量ammount inline-block div来覆盖屏幕的100％？

即时尝试不使用媒体查询，但如果没有其他方式，那么我认为我应该。

 <style> 
      div{display:inline-block; max-width:400px; min-width:300px; width:20%; height:100px;} 
     </style> 
     <div style="background:red;"> 
     </div><!-- 
     --><div style="background:blue;"> 
     </div><!-- 
     --><div style="background:yellow;"> 
     </div><!-- 
     --><div style="background:magenta;"> 
     </div><!-- 
     --><div style="background:green;"> 
     </div> 
     </body>

来源

2017-06-12 Paulo

退房[flexboxes]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes） –

钍阿克斯，我期待有人这样说。我不太喜欢flexbox，但我想比使用大量媒体查询要好。 – Paulo

那么，如果你有一个设备宽度敏感的布局，其中特定的宽度应该触发回流，那么你将不得不使用媒体查询。 –

您可以在家长和孩子使用display: flex;设置的（短期或flex: 1 0 20%;）flex-grow: 1; flex-basis: 20%，因此他们将“增长”，以填补父宽度，并有20％的基本宽度，然后指定min/max-width

body { 
 
    margin: 0; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex > div { 
 
    flex: 1 0 20%; 
 
    max-width: 400px; 
 
    min-width: 300px; 
 
    height: 1em; 
 
    background: #222; 
 
    box-sizing: border-box; 
 
    border: 1px solid white; 
 
}

<div class="flex"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

来源

2017-06-12 20:51:26

我如何使用变量ammount inline-block div来覆盖屏幕的100％？

回答

相关问题