相关疑难解决方法(0)

在IE11中,不会从正常流程中删除绝对定位的弹性项目

我们有两个带内容的div和第三个div,它是具有绝对位置的背景.

Container是一个flexbox.

一切都在Chrome和Safari中运行良好,但Firefox和 IE11在绝对定位div中起作用,并在div之间分配空间,就像连续有3个div一样.

在此输入图像描述

我做了jsfiddle的例子.有没有办法解决这个错误? https://jsfiddle.net/s18do03e/2/

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="c1">Content 1</div>
  <div …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox internet-explorer-11

28
推荐指数
3
解决办法
2万
查看次数

在主容器中定位网格项的内容(子网格功能)

关于CSS网格的所有指南似乎都暗示了一种结构,其中位于网格中的元素是网格本身的子元素.

<div class="wrapper">
  <div>A</div>
  <div>B</div>
</div>
Run Code Online (Sandbox Code Playgroud)

.wrapper具有display: grid和网格属性的定义.

如果我想在网格本身上放置一个网格的"孙子"元素(而不是依赖于它的父级?),这是否有意义?

<div class="wrapper">
  <div>A</div>
  <div>
    <div>B</div>
    <div>C</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

在这里,我希望能够将A,B和C各自放在他们自己的网格行上; 这甚至有意义吗?

css css3 css-grid

8
推荐指数
2
解决办法
2105
查看次数

标签 统计

css ×2

css3 ×2

css-grid ×1

flexbox ×1

html ×1

internet-explorer-11 ×1