html - 砌体类型布局问题
问题描述
.masonry {
column-count: 1;
column-gap: 20px;
max-width: 900px;
margin: 20px auto;
}
@media only screen and (min-width: 600px) {
.masonry {
column-count: 2;
}
}
.item {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
color: #fff;
font-size: 40px;
}
.item--type1 {
width: 100%;
height: 200px;
background: red;
}
.item--type2 {
width: 100%;
height: 400px;
background: blue;
}
.item--type3 {
width: calc(50% - 40px);
height: 600px;
background: green;
margin-right: 20px;
}
<div class="masonry">
<div class="item item--type1">1</div>
<div class="item item--type2">4</div>
<div class="item item--type3">2</div>
<div class="item item--type3">3</div>
</div>
我只是想构建如下图所示的布局。我试图用 column count :2 无法实现正确的顺序。这种布局有什么新的解决方案吗?
PS:CSS 网格无法正常与 IE 一起使用。
解决方案
推荐阅读
- reactjs - Nextjs App - 无法使用 useDispatch 和 useSelector
- php - 十月 CMS - 自定义插件:检测到 JSON 递归
- python - 反转垂直滚动
- google-apps-script - 如何从 Google 表格中不断增长的字符串列表中找到与字符串最接近的匹配项?
- javascript - 如何在类的元素上应用 javascript
- asp.net-core - $Metadata url 使用 Microsoft.AspNetCore.OData 8.0.0-rc2 返回 404
- html - 如何创建简单的持续缓慢移动的 CSS 图像滑块?
- terminal - cygwin 终端窗口中的标题/标题是如何生成/定义的?
- android - Linking.openURL 示例代码不适用于某些 Android 手机
- mongodb - Mongodb - 在迁移中更新具有> 100,000个文档的集合