文章/答案/技术大牛

发布

社区首页 >问答首页 >对齐-内容不工作Internet Explorer 11

问对齐-内容不工作Internet Explorer 11
EN

Stack Overflow用户

提问于 2019-05-02 16:43:20

回答 2查看 423关注 0票数 0

.row {
  background: green;
  color: white;
  margin-top: 20px;
}

.col2 {
  border: 3px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-end;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-6 col1">
      Text
    </div>
    <div class="col-6 col2">
      <p>
      Home
      </p>
      <p>
      Lorem ipsum dolor sit
      </p>
    </div>
  </div>
</div>

jsfiddle：https://jsfiddle.net/ez68c5mr/

align-content: flex-end不能工作IE 11.我想要对齐右边的col2行。align-items: flex-end做的不是我想要的。

align-items:像这样的flex-end。

                 Home
Lorem ipsum dolor sit

我想要这个。但是align-content在IE中不起作用。

           Home
           Lorem ipsum dolor sit

bootstrap-4

flexbox

internet-explorer-11

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-05-02 17:19:12

我能找到的最简单的解决方案是将内容包装在<div>中，并将flexbox容器设置为align-items: flex-end。

这是a community-curated list of flexbox issues and cross-browser workarounds for them (它可能会对你当前的项目有所帮助)。

.row {
  background: green;
  color: white;
  margin-top: 20px;
}

.col2 {
  border: 3px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* align-content: flex-end; */
  align-items: flex-end;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-6 col1">Text</div>
    <div class="col-6 col2">
      <div class="ie-fix">
        <p>Home</p>
        <p>Lorem ipsum dolor sit</p>
      </div>
    </div>
  </div>
</div>

票数 1

Stack Overflow用户

发布于 2019-06-13 20:21:26

我在使用flex-box =>多线路时遇到了这个问题，IE11

在为容器添加align-items: flex-start之后。这个问题似乎已经解决了。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55948678

复制

相似问题

问对齐-内容不工作Internet Explorer 11
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对齐-内容不工作Internet Explorer 11EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对齐-内容不工作Internet Explorer 11
EN