我有一些 div,它们应该有一个最小宽度和一个最大宽度,并且也是内联 block 并且应该始终覆盖 100% 的屏幕。 问题是,我不确定在宽度部分指定什么以使 div 始终覆盖 100%
例如,如果我有 5 个 div,最大宽度为 400,最小宽度为 300,每个覆盖 20% 的屏幕,当我达到 1500px 屏幕时,一个 div 应该下降,但其他 div 应该保持在 300px .我知道这是因为我将宽度指定为 20%,但我找不到如何让它们自动增长以覆盖 100%
当屏幕达到 1500 像素时,我需要每个 div 为 375 像素,这意味着它们应该占总宽度的 25%,直到屏幕达到 1200 像素,然后重复。
我尝试不使用媒体查询,但如果没有其他方法,那么我认为我应该使用。
<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;
set flex-grow: 1; flex-basis: 20%
(或简称 flex: 1 0 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>
关于html - 我如何使用可变 ammount 内联 block div 覆盖 100% 的屏幕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44508338/