html - 获取内联块元素以占用所有空白空间
问题描述
我正在尝试将元素堆叠在一起。在我的情况下,我有不同高度的元素会导致不需要的空白。
我正在寻找 6 和 7 个框来向上移动所有相应的元素。
.blockParent {
text-align: center;
position: relative;
width: 90%;
left: 5%;
}
.block {
position: relative;
display: inline-block;
width: 500px;
background-color: red;
height: 200px;
margin: 5px;
}
.smaller {
height: 100px;
vertical-align: top;
}
<div class="blockParent">
<div class="block">
</div>
<div class="block">
</div>
<div class="block smaller">
</div>
<div class="block smaller">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block ">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
我认为 flexbox 可能是一个解决方案,但我没有使用 flexbox 的经验。有任何想法吗?提前致谢!
解决方案
Flexbox 并不是为了解决这个问题而设计的。您可以改用 CSS 多列。请注意,显示顺序从水平变为垂直。
.blockParent {
column-count: 3;
}
.block {
display: inline-block;
vertical-align: top;
background-color: silver;
width: 100%;
height: 200px;
margin: 5px;
}
.smaller {
height: 100px;
}
<div class="blockParent">
<div class="block"></div>
<div class="block"></div>
<div class="block smaller"></div>
<div class="block smaller"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block "></div>
<div class="block"></div>
<div class="block"></div>
</div>
推荐阅读
- reactjs - 反应路由器错误,实现匹配接口
- angular - 角度 5 中具有相同 URL 的两个不同组件(通过延迟加载在路由器中传递 slug)
- complex-event-processing - CEP 列表作为单个项目(迭代托管对象)
- node.js - 如何在环回中获取标头值
- python - 二维列表中的嵌套迭代
- jquery - 使用 $(window).scroll(function() 时事件未绑定在 ajax 加载的内容上
- html - 使用 div 分割 HTML 页面
- java - java.io.IOException
- php - Woocommerce 丢失密码重定向到 wordpress 忘记密码,但不是到我的自定义忘记密码页面
- git - “您的分支领先于原产地/主人 * 提交数量” 是否有可能扭转这种情况?