<分区>
现在是这样的:
我想要这样:
我的CSS:
.maindiv{
width:410px;
}
.innerdiv{
display: inline-block;
width: 200px;
height: auto;
}
这是一个 example page
<分区>
现在是这样的:
我想要这样:
我的CSS:
.maindiv{
width:410px;
}
.innerdiv{
display: inline-block;
width: 200px;
height: auto;
}
这是一个 example page
最佳答案
这里有一个简单的实现,只需在主 div 上使用 display:flex 并制作两列 div 来包裹内部 div
<div class="maindiv">
<div class="col-1">
<div class="innerdiv">
<img style="width: 100%; height: 200px;"/>
</div>
<div class="innerdiv">
<img style="width: 100%; height: 120px;"/>
</div>
<div class="innerdiv">
<img style="width: 100%; height: 220px;"/>
</div>
</div>
<div class="col-1">
<div class="innerdiv">
<img style="width: 100%; height: 260px;"/>
</div>
<div class="innerdiv">
<img style="width: 100%; height: 180px;"/>
</div>
</div>
</div>
CSS
.maindiv {
width: 410px;
display: flex;
}
结果
关于html - 删除 div 之间的垂直间隙并放入序列中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31980374/
相关文章:
html - 有什么方法可以从 EPUB 中检测 iBooks 中的深色主题是否处于事件状态?
javascript - 通过单击 href url 加载新页面时不会调用 JavaScript 中的函数
javascript - 如何修复 div 类 ="row"angular + bootstrap 中的元素
HTML 箭头 "Top of Site"不在 URL 中显示#id
javascript - 我应该在 html 中插入什么以便在代码验证器中可以使用?
javascript - 如何动态更改 jsPlumb 中的 targetOption 和 sourceOption anchor ?