Question

HTML代码（不应修改结构）：

<div class="container">
    <div class="left">1</div>
    <div class="right">2</div>
    <div class="right">3</div>
    <div class="right">4</div>
    <div class="left">5</div>
    <div class="left">6</div>
    <div class="right">7</div>
<div>

预期结果（两列，无间隙）：

+-----------+-------+
|     1     |   2   |
|           |-------|
|-----------|   3   |
|     5     |       |
|           |-------|
|-----------|   4   |
|     6     |-------|
|-----------|   7   |
|           |       |
+-----------+-------+

儿童元素可以包含任何数量的内容（在大多数情况下，它们的高度永远不会相等）。

.left元素的宽度为70％，.right - 30％。

HTML代码应该是原样的，因为元素的结构顺序是窄屏幕上的要求（它将缩小为单列布局），并且我希望在更宽的屏幕上有两列，如方案中所示。

使用float会在右侧产生不必要的间隙。 Flexbox 能否解决问题？

Answer 1

我认为在没有容器之间的间隙的情况下实现这种布局是不可能的。

我能做这项工作的唯一方法是使用javascript（我使用砌砖）

Html：

<div class="container js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
<div class="item left">1 </div>
<div class="item right">2 </div>
<div class="item right">3</div> 
<div class="item right">4</div>
<div class="item left">5</div>
<div class="item left">6</div>
<div class="item right">7</div>
<div>

和CSS：

.left {width:70%;background-color:#ccc;}
.right {width:30%;background-color:#d00;float:right;}
.stamp {position:relative !important; clear:right;}

以下是codepen：http://codepen.io/razvan/pen/Iydwg

Answer 2

让我们给它一个 GO ：

SAME HTML + some css classes
<div class="flex-container">
    <div class="flex-item left">1</div>
    <div class="flex-item right">2</div>
    <div class="flex-item right">3</div>
    <div class="flex-item right">4</div>
    <div class="flex-item left">5</div>
    <div class="flex-item left">6</div>
    <div class="flex-item right">7</div>
<div>

reset basic
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

THE CSS
    *{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.flex-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
}

.flex-item{
  background-color: tomato;
  border: 1px solid grey;
  flex: 1;
}

.left{
  width: 70%;
  order: 1;
}

.right{
  width: 30%;
  order: 3;
}

.break{
  order: 2;
  padding-top: 100%;
}

JQUERY
// Adds element after the last LEFT
$('.left').last().after('<div class="break"></div>');

嗯，这就是它的CodePen。

感谢。

将元素分组为两列并将它们对齐到顶部（使用Flexbox）

2 个答案: