html - 删除 div 之间的垂直间隙并放入序列中

标签 html css

<分区>

现在是这样的:

in order

我想要这样:

order

我的CSS:

.maindiv{
    width:410px;
}
.innerdiv{
    display: inline-block;
    width: 200px;
    height: auto;
}

JSFIDDLE

这是一个 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;
}

结果

enter image description here

关于html - 删除 div 之间的垂直间隙并放入序列中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31980374/

相关文章:

html - 有什么方法可以从 EPUB 中检测 iBooks 中的深色主题是否处于事件状态?

javascript - 通过单击 href url 加载新页面时不会调用 JavaScript 中的函数

javascript - 如何修复 div 类 ="row"angular + bootstrap 中的元素

html - 元素的宽度即时发生更改文本

HTML 箭头 "Top of Site"不在 URL 中显示#id

javascript - 免费的 CSS 下拉菜单框架

javascript - 我应该在 html 中插入什么以便在代码验证器中可以使用?

javascript - 如何动态更改 jsPlumb 中的 targetOption 和 sourceOption anchor ?

javascript - 使用 jquery 附加到 href 值的末尾

html - CSS 样式 div 和段落