Flex Container 的绝对定位孙辈 - Firefox 和 MS 问题

【问题标题】：Absolutely Positioned Grandchildren Of Flex Container - Firefox & MS issuesFlex Container 的绝对定位孙辈 - Firefox 和 MS 问题
【发布时间】：2018-02-03 23:37:52
【问题描述】：

我正在尝试在一组 div 上使用 flexbox，效果很好。 div 以适当的间距在所有浏览器上正确定位。

然而，在每个 div 中，我都在努力使用绝对定位来定位一些文本。

我只想在某些图像上做的是，将p 标签放置在其父级下方 11 像素处。在其他情况下，我想将 p 标记定位在父级内。

我可以在所有浏览器中毫无问题地定位内部文本。但是，在 Firefox 和 Edge/IE 上，我无法使用相同的代码定位外部文本。我发现了一个 Firefox 的 hack，您将在下面看到使用 @-moz-document url-prefix()。

我可能会错过什么？

请注意，我问的不是弹性容器的子代，而是孙代。我在 SO 上阅读的许多问题只涉及儿童。我这里的孩子很好。有问题的是孙子孙女。

.container {
    background: #969898;
    margin: 0 auto;
    max-width: 980px;
    width: 90%;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


.row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.img-responsive {
    max-width: 100%;
    display: block;
}

.features-section__features {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.circle {
    border-radius: 50%;
    height: 128px;
    width: 128px;
}

.circle-inner {
    background-color: #8FCBE8;
}

.circle-inner p {
    color: #1E2D3B;
    font-size: 16px;
    font-weight: 600;
    height: 54px;
    margin: 35px auto;
    text-align: center;
    width: 100px;
}

.circle-outer {
    background: transparent;
    border: 2px solid #8FCBE8;
    position: relative;
}

.circle-outer img {
    border-radius: 50%;
    height: 116px;
    margin: 6px auto;
    width: 116px;
}

.circle-outer p {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    height: 48px;
    left: -96px;
    position: absolute;
    bottom: -59px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    width: 320px;
}


/* fix for issue with absolute position on firefox */

@-moz-document url-prefix() {
    .circle-outer p {
        left: -96px;
        position: absolute;
        bottom: -80px;
    }
}

/* some media queries */
@media screen and (max-width: 1100px) {
    .circle-outer p {
        width: 200px;
        left: -36px;
    }
    @-moz-document url-prefix() {
        .circle-outer p {
            left: -36px;
        }
    }
}

@media screen and (max-width: 768px) {
    .circle {
        margin: 50px 40px;
    }
}

@media screen and (max-width: 470px) {
    .circle {
        margin: 50px 20px;
    }
}

@media screen and (max-width: 373px) {
    .circle:nth-child(even) {
        margin-bottom: 0;
    }
}
<head>

    <!-- NORMALIZE CSS -->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css'>
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,500,500i,600,700" rel="stylesheet">

</head>

<div class='container'>
  <div class='features-section__features flex row'>
      <div class='circle circle-outer'>
          <img src="http://lorempixel.com/200/200/people" class='img-responsive'>
          <p>This text should be below with ~ 11px margin.</p>
      </div>
      <div class='circle circle-inner'>
          <p>This text is happily set inside</p>
      </div>
      <div class='circle circle-outer'>
          <img src="http://lorempixel.com/200/200/people" class='img-responsive'>
          <p>This text should be below with ~ 11px margin.</p>
      </div>
      <div class='circle circle-inner'>
          <p>This text is happily set inside.</p>
      </div>
      <div class='circle circle-outer'>
          <img src="http://lorempixel.com/200/200/people" class='img-responsive'>
          <p>This text should be below with ~ 11px margin.</p>
      </div>
  </div>
</div>

【问题讨论】：

    标签： html css flexbox css-position


    【解决方案1】：

    您希望外部文本位于父级下方 11 像素处。

    与使用 bottom: -59px 不同，它似乎在不同浏览器之间呈现不同，这种替代方法可能更精确和高效：

    .circle-outer p {
    top: calc(100% + 11px);
    margin: 0; /* remove default margins */
 }


    .container {
    background: #969898;
    margin: 0 auto;
    max-width: 980px;
    width: 90%;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


.row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.img-responsive {
    max-width: 100%;
    display: block;
}

.features-section__features {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.circle {
    border-radius: 50%;
    height: 128px;
    width: 128px;
}

.circle-inner {
    background-color: #8FCBE8;
}

.circle-inner p {
    color: #1E2D3B;
    font-size: 16px;
    font-weight: 600;
    height: 54px;
    margin: 35px auto;
    text-align: center;
    width: 100px;
}

.circle-outer {
    background: transparent;
    border: 2px solid #8FCBE8;
    position: relative;
}

.circle-outer img {
    border-radius: 50%;
    height: 116px;
    margin: 6px auto;
    width: 116px;
}

.circle-outer p {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    height: 48px;
    left: -96px;
    position: absolute;
    /* bottom: -59px; */    
    top: calc(100% + 11px); /* NEW */
    margin: 0;              /* NEW */
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    width: 320px;
}


/* fix for issue with absolute position on firefox */

@-moz-document url-prefix() {
    .circle-outer p {
        left: -96px;
        position: absolute;
        bottom: -80px;
    }
}

/* some media queries */
@media screen and (max-width: 1100px) {
    .circle-outer p {
        width: 200px;
        left: -36px;
    }
    @-moz-document url-prefix() {
        .circle-outer p {
            left: -36px;
        }
    }
}

@media screen and (max-width: 768px) {
    .circle {
        margin: 50px 40px;
    }
}

@media screen and (max-width: 470px) {
    .circle {
        margin: 50px 20px;
    }
}

@media screen and (max-width: 373px) {
    .circle:nth-child(even) {
        margin-bottom: 0;
    }
}
    <div class='container'>
  <div class='features-section__features flex row'>
      <div class='circle circle-outer'>
          <img src="http://lorempixel.com/200/200/people" class='img-responsive'>
          <p>This text should be below with ~ 11px margin.</p>
      </div>
      <div class='circle circle-inner'>
          <p>This text is happily set inside</p>
      </div>
      <div class='circle circle-outer'>
          <img src="http://lorempixel.com/200/200/people" class='img-responsive'>
          <p>This text should be below with ~ 11px margin.</p>
      </div>
      <div class='circle circle-inner'>
          <p>This text is happily set inside.</p>
      </div>
      <div class='circle circle-outer'>
          <img src="http://lorempixel.com/200/200/people" class='img-responsive'>
          <p>This text should be below with ~ 11px margin.</p>
      </div>
  </div>
</div>

    【讨论】：

      【解决方案2】：

      一种选择是根本不设置top 或bottom，而是让它使用标记设置的位置，然后使用margin-top 将其向下移动。

      我还删除了所有.cirlce-outer p 规则（包括媒体查询）中的负面left 设置，而是添加了一次：

      left: 50%;
transform: translateX(-50%);

      这样，无论您设置的宽度如何，文本都将始终水平居中。

      Fiddle demo

      堆栈sn-p

      .container {
    background: #969898;
    margin: 0 auto;
    max-width: 980px;
    width: 90%;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


.row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.img-responsive {
    max-width: 100%;
    display: block;
}

.features-section__features {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.circle {
    border-radius: 50%;
    height: 128px;
    width: 128px;
}

.circle-inner {
    background-color: #8FCBE8;
}

.circle-inner p {
    color: #1E2D3B;
    font-size: 16px;
    font-weight: 600;
    height: 54px;
    margin: 35px auto;
    text-align: center;
    width: 100px;
}

.circle-outer {
    background: transparent;
    border: 2px solid #8FCBE8;
    position: relative;
}

.circle-outer img {
    border-radius: 50%;
    height: 116px;
    margin: 6px auto;
    width: 116px;
}

.circle-outer p {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    height: 48px;
    left: 50%;                         /*  changed  */
    transform: translateX(-50%);       /*  added  */
    position: absolute;
    margin-top: 11px;                  /*  added  */
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    width: 320px;
}


/* some media queries */
@media screen and (max-width: 1100px) {
    .circle-outer p {
        width: 200px;
    }
}

@media screen and (max-width: 768px) {
    .circle {
        margin: 50px 40px;
    }
}

@media screen and (max-width: 470px) {
    .circle {
        margin: 50px 20px;
    }
}

@media screen and (max-width: 373px) {
    .circle:nth-child(even) {
        margin-bottom: 0;
    }
}
          <!-- NORMALIZE CSS -->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css'>
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,500,500i,600,700" rel="stylesheet">

<div class='container'>
  <div class='features-section__features flex row'>
      <div class='circle circle-outer'>
          <img src="http://lorempixel.com/200/200/people" class='img-responsive'>
          <p>This text should be below with ~ 11px margin.</p>
      </div>
      <div class='circle circle-inner'>
          <p>This text is happily set inside</p>
      </div>
      <div class='circle circle-outer'>
          <img src="http://lorempixel.com/200/200/people" class='img-responsive'>
          <p>This text should be below with ~ 11px margin.</p>
      </div>
      <div class='circle circle-inner'>
          <p>This text is happily set inside.</p>
      </div>
      <div class='circle circle-outer'>
          <img src="http://lorempixel.com/200/200/people" class='img-responsive'>
          <p>This text should be below with ~ 11px margin.</p>
      </div>
  </div>
</div>

      【讨论】：

      • 谢谢。很好地抓住了转变。这更简单，更有帮助。 margin-top 也是一个很好的解决方案。我会在星期一检查我的项目。
      猜你喜欢
      • 2011-07-25
      • 1970-01-01
      • 2011-04-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-07-24
      • 2018-07-09
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode