Question

所以我使用新的flexbox CSS模块尝试创建两列框。

目标：框必须按左右 - 右 - 右等顺序排列，而不是按列顺序排列（需要行）盒子可以有不同的高度除了通过css

指定的内容之外，框之间不应有垂直间距

我已经完成了该列表中除最后一个之外的所有操作。无论我做什么，如果其中一行中的项目高于另一行，它不可避免地将下一行中的项目向下推。我不想要这种行为，并且再次使用列而不是行不是一种选择。

以下是您可以使用的简化标记：

HTML：

<div class="blocks">
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
</div>

CSS：

.blocks {
    display: flex;
    flex-wrap: wrap;
}

.block {
    width: calc(50% - 15px);
    background: gray;
    outline: 1px solid red;
    margin-bottom: 10px;
}

.block:nth-child(2n+1){
    margin-right: 30px;
}

.block:nth-child(1) {
    height: 150px;
}

.block:nth-child(2) {
    height: 190px;
}

.block:nth-child(3) {
    height: 180px;
}

.block:nth-child(4) {
    height: 160px;
}

.block:nth-child(5) {
    height: 190px;
}

.block:nth-child(6) {
    height: 150px;
}

在这个例子中，列中的项之间的间距不应超过10px。

这是一个JS小提琴，供你们玩：

http://jsfiddle.net/esryrk3w/

请注意列中项目之间的额外垂直间距。

Answer 1

解决方案？停止使用flexbox。

只需使用交替浮动。第一个框浮动第二个框，每个第二个框浮动到右边，第二个框浮动第一个框，每隔一个框浮动到左边。解决了问题。

.block:nth-child(2n+2) {

    // POSITIONING
    float: right;
}

.block:nth-child(2n+1) {

    // POSITIONING
    float: left;
}

工作JS小提琴：http://jsfiddle.net/esryrk3w/1/

行中的项目之间没有额外的间距

1 个答案: