在Safari中使用Flexbox绝对定位

安德鲁·希尔

Safari表示,Safari完全支持FlexBox。

我只是试图使用flexbox在彼此之间堆叠一些大小不同的div。我真的很好奇为什么它可以在Chrome / Firefox中运行而不能在Safari中运行:

<div class="container">
  <div class="inner-one"></div>
  <div class="inner-two"></div>
</div>
.container {
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background-color: blue;

  display: flex;
  align-items: center;
  justify-content: center;
}

.container div {
  position: absolute;
}

.inner-one {
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  background-color: green;
}

.inner-two {
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background-color: purple;
}

在这里查看JSFiddle:https ://jsfiddle.net/19n95exf/3/

一个儿子

因为position: absolute;break display: flextransform: translate改用

    .container {
      position: relative;
      width: 15rem;
      height: 15rem;
      border-radius: 50%;
      background-color: blue;
    }

    .container div {
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

    .inner-one {
      width: 13rem;
      height: 13rem;
      background-color: green;
    }

    .inner-two {
      width: 11rem;
      height: 11rem;
      background-color: purple;
    }
    <div class="container">
      <div class="inner-one"></div>
      <div class="inner-two"></div>
    </div>


或者给内部元素一个左/上值

    .container {
      width: 15rem;
      height: 15rem;
      border-radius: 50%;
      background-color: blue;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container div {
      border-radius: 50%;
      position: absolute;
    }

    .inner-one {
      left: 1.5rem;
      top: 1.5rem;
      width: 13rem;
      height: 13rem;
      background-color: green;
    }

    .inner-two {
      left: 2.5rem;
      top: 2.5rem;
      width: 11rem;
      height: 11rem;
      background-color: purple;
    }
<div class="container">
      <div class="inner-one"></div>
      <div class="inner-two"></div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Flexbox无法在Safari中使用

Flexbox和绝对定位在Chrome和Safari中不起作用

Flexbox,绝对定位,高度为100%

Safari上动画的绝对定位失败

使用flexbox父级在绝对定位的div中垂直居中,右对齐,多行文本

使用绝对定位破坏文本

由于滚动菜单消失,使用flexbox的固定元素在iPhone移动Safari上重新定位

绝对定位元素不在Safari iOS中的其他绝对定位元素之上

将绝对定位的元素与flexbox垂直对齐

获取绝对定位的链接以与flexbox一致显示

使用CSS定位div:使用绝对定位div的布局问题

不使用绝对定位的HTML布局

如何使用CSS下推绝对定位的div

如何不使用绝对定位CSS

使用Bootstrap绝对定位中心图像位置

定位Safari时,如何在TypeScript(angular2)中使用await / async?

在定位元素时使用边距还是绝对定位?

相对定位与绝对定位

在可重定位程序中使用PC相对寻址进行绝对寻址。修改记录将是什么样的?

在改造中使用绝对URL

在JScrollPane中使用绝对布局

使用 flexbox 居中文本定位

在Safari中使用getElementByClassName

为什么`height:100%`和绝对定位在flexbox中不起作用?

具有表格和绝对定位功能的Flexbox在IE 10、11或Edge中不起作用

如何在Safari中将flex容器的绝对定位的子项居中居中?

具有绝对定位功能的Flex在Safari中不起作用

使用flexbox在div内居中div并使用绝对位置

可以使用CssLayout来实现组件的绝对定位吗?

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    使用AWS Cognito和React的仅限Facebook / Google的登录名(无用户名/密码)

  3. 3

    创建Windows Phone 8应用并将其连接到数据库的最佳方法(最好是SQL Server)

  4. 4

    为什么Java中的System.out.println()打印到控制台?

  5. 5

    卷曲函数无法解析来自bash中变量的代理

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    设置与Apache POI Excel表散点图标记图标的颜色

  8. 8

    将Qt Pyside2与asyncio await语法一起使用?

  9. 9

    崇高的文字+蟒蛇的蟒蛇

  10. 10

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  11. 11

    OpenJDK的和AdoptOpenJDK的区别

  12. 12

    大型数据集缓存到Spark内存中时,“超出了GC开销限制”(通过sparklyr和RStudio)

  13. 13

    “执行测试CMAKE_HAVE_LIBC_PTHREAD”失败实际上是什么意思?

  14. 14

    使用Core 2.2中的Identity,如何在关闭浏览器15分钟后保持会话活动?

  15. 15

    React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

  16. 16

    猫鼬查找结果,然后将字段替换为findOne

  17. 17

    如何降级Google Colab的Torch版本

  18. 18

    Keras提前停止回调错误,val_loss指标不可用

  19. 19

    如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误?

  20. 20

    Nuxt.JS:如何在页面中获取路由URL参数

  21. 21

    是否有为什么会AccessibilityManager.sInstance导致内存泄漏的一个原因?

热门标签

归档