相关疑难解决方法(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

Nik*_*kiy

2018 01-09

28
推荐指数

3
解决办法

2万
查看次数

justify-content:space-between无法按预期对齐元素

我需要使用flexbox来集中我的导航,因此我想出了以下内容:

.navbar-brand > img {
  width: 100px;
}
.navbar-default {
  background-color: #fff;
  border-color: #fff;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.navbar-default .navbar-nav > li > a {
  color: #464646;
  text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active {
  color: #727272;
}
.navbar-default .navbar-nav > li:not(.active) > a:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30%; …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox twitter-bootstrap

Ale*_*nik

2017 11-16

17
推荐指数

1
解决办法

6989
查看次数

伪元素就像CSS网格中的网格项一样

我正在创建一个包含必填字段的表单.为了按要求标记这些,我将一个星号(*)作为一个::before元素并将其向右浮动,使其位于该字段的右上角.

我遇到的问题是这些字段中的一些是使用CSS网格定位的,当我::before向网格添加元素时,它被视为另一个网格项并将所有内容推送到新的网格行.

为什么CSS网格将::before元素视为另一个网格项？如何将星号定位为输入元素？

这是基本的HTML/CSS:

html {
  width: 75%;
}

ul {
  list-style: none;
}

input {
  width: 100%
}

.grid {
  display: grid;
  grid-template-columns: .33fr .33fr .33fr;
}

li.required::before {
  content: '*';
  float: right;
  font-size: 15px;
}

Run Code Online (Sandbox Code Playgroud)

<ul>
  <li class="required">
    <input type="text">
  </li>
  <li class="grid required">
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </li>
  <li class="required">
    <input type="text">
  </li>
</ul>

Run Code Online (Sandbox Code Playgroud)

这是一个小提琴:https://jsfiddle.net/zbqucvt9/

html css css3 pseudo-element css-grid

And*_*rea

2017 08-10

5
推荐指数

1
解决办法

2335
查看次数