我将 Pinterest 视为一种设计灵感,它们具有固定宽度的列,但每个网格元素都填充了所有可用空间(并且具有可变高度)。这是一个例子:
我的第一个想法是 flexbox 会帮我解决这个问题,但我运气不佳。这是我尝试过的:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.flex-item {
margin: 10px;
background-color: #3299bb;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
</style>
</head>
<body>
<div class='flex-container'>
<div class='flex-item' style='height: 200px; width: 800px;'>
<p>#1</p>
</div>
<div class='flex-item' style='height: 50px; width: 200px;'>
<p>#2</p>
</div>
<div class='flex-item' style='height: 50px; width: 200px;'>
<p>#3</p>
</div>
</div>
</body>
</html>
我的问题相当简单。您如何设置您的 CSS 以使这种设计成为可能?
最佳答案
这是一个很棒的插件,可以做到这一点。
您可以将它与 jQuery 或 Vanilla JS 一起使用
这是另一种仅使用 CSS 的方法
关于gui-design - 如何组织具有固定宽度但可变高度框的网格以填充可用空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35247812/