时间戳

首页 > 解决方案 > 如何让这个简单的登陆页面弹性框在所有相关浏览器中都能正常工作？

html - 如何让这个简单的登陆页面弹性框在所有相关浏览器中都能正常工作？

问题描述

几个小时以来，我一直在尝试使用 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 中存在问题：即使浏览器窗口足够大，可以将两个盒子放在一起，这两个盒子总是堆叠在一起。你能帮我解决这个问题吗？提前致谢！

标签： htmlcssflexboxcross-browserinternet-explorer-11

解决方案

这里左侧设置为 1 号，右侧设置为 2 号，因此左侧为 33% 大小

如果窗口为 900 像素或更小（因此左侧为 300 像素），则切换到反向列，以便将其显示为列并且标题将位于最后

.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>

推荐阅读