使用flexbox将2行中的3个项目对齐

时间:2017-09-03 15:23:03

标签: html css css3 flexbox

我不确定是否可能,但我正在尝试创建一个包含三个项目的flexbox,一个高2行,其他项目旁边有1行。

所需的布局(带浮动)

HTML

<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>

CSS

.item-1 {
  float: left;
  width: 20%;
  height: 150px;
  background: red;
}

.item-2,
.item-3 {
  float: right;
  width: 80%;
  height: 75px;
}

.item-2 {
  background: green;
}

.item-3 {
  background: blue;
}

JSFiddle

0 个答案:

没有答案