我如何使用变量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>
答
您可以在家长和孩子使用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>
退房[flexboxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) –
钍阿克斯,我期待有人这样说。我不太喜欢flexbox,但我想比使用大量媒体查询要好。 – Paulo
那么,如果你有一个设备宽度敏感的布局,其中特定的宽度应该触发回流,那么你将不得不使用媒体查询。 –