html - 如何让这个简单的登陆页面 flex box 在所有相关浏览器中工作？

Question

几个小时以来，我一直在尝试使用 flexbox 使一个简单的着陆框横幅布局在所有相关浏览器中工作，但没有成功。下面是我想要实现的布局草图。基本上只有两个框用于图像和彼此相邻的标题。达到标题框的某个最小宽度时，布局应换行为堆叠布局:

这是我的 HTML 代码:

<div class="landing_page_box">
  <div class="landing_page_box_left">
    <h2>Title</h2>
  </div>
  <div class="landing_page_box_right">
    <figure>...</figure>
  </div>
</div>

这是 CSS 代码:

div.wp-block-columns.landing_page_box {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap-reverse;
}

div.landing_page_box_left {
  flex: 1 0 33.33%;
  min-width: 300px;
  padding: 30px;
  background: #cccccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div.landing_page_box_right {
  flex: 2 0 66.66%;
}

虽然这似乎在 Firefox V70 和 Chrome V78 中有效，但在 Internet Explorer 11 中存在问题:即使浏览器窗口足够大，两个框可以相互放置，但两个框总是堆叠在一起。你能帮我解决这个问题吗？提前致谢!

Answer 1

此处左侧设置为 1 号，右侧设置为 2 号，因此左侧为 33% 号

如果窗口是 900px 或更小(所以左边是 300px)然后切换到 column-reverse 这样它将显示为一列并且标题将排在最后

.landing_page_box {
  display: flex;
}
.landing_page_box_left {
  flex: 1 1 auto;
  padding: 30px;
  background: #cccccc;  
}
.landing_page_box_right {
  flex: 2 1 auto;
}
@media (max-width: 900px) {
  .landing_page_box {
    flex-direction: column-reverse;
  }
}

<div class="landing_page_box">
  <div class="landing_page_box_left">
    <h2>Title</h2>
  </div>
  <div class="landing_page_box_right">
    <figure>...</figure>
  </div>
</div>

除了设置为 400px 之外，这里是一样的，这样您可以更轻松地在堆栈溢出代码段中进行实时测试

.landing_page_box {
  display: flex;
}
.landing_page_box_left {
  flex: 1 1 auto;
  padding: 30px;
  background: #ccc;  
}
.landing_page_box_right {
  flex: 2 1 auto;
  background: #ddd;  
}
@media (max-width: 500px) {
  .landing_page_box {
    flex-direction: column-reverse;
  }
}

<div class="landing_page_box">
  <div class="landing_page_box_left">
    <h2>Title</h2>
  </div>
  <div class="landing_page_box_right">
    <figure>...</figure>
  </div>
</div>