Question

我要实现的是，当布局分解为可移动时，图像块与标题/内容块的高度相同。

布局非常棘手，它可以在桌面视图上按预期工作，标题栏位于顶部全宽。我认为问题是使用flex-wrap：在移动视图上包装？（我已经使用CSS网格使此布局正常工作，但不幸的是它无法在生产中使用）

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-end;
}

.title {
  background: tomato;
  width: 50%;
}

.image {
  background: cornflowerblue;
  width: 50%;
  height: 150px;
}

.content {
  background: gold;
  width: 50%;
}

<div class="wrapper">
  <div class="image">img</div>
  <div class="title">title</div>
  <div class="content">content</div>
</div>

shinyApp-example

Answer 1

使用此代码

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-end;
}

.title,
.image,
.content {
  width: 50%;
}

.title {
  background: tomato;
}

.image {
  background: cornflowerblue;
}

.content {
  background: gold;
}

@media only screen and (min-width: 800px) {
  .title {
    width: 100%;
    order: 1;
  }

  .image {
    order: 2;
    height: 150px;
  }

  .content {
    order: 3;
  }
}

CSS Flexbox-第一个高度相等的孩子

1 个答案: