绝对定位的Flex容器的孙子 - Firefox＆amp; MS问题

时间：2017-08-25 21:18:49

标签： html css css3 flexbox css-position

我正在尝试在一组div上使用flexbox，这很好用。 div具有适当的间距，适用于所有浏览器。

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

我只想对某些图片做什么，将p标记放在它的父母下方11px处。在其他方面，我想将p标记放在父标记内。

我可以在所有浏览器中定位内部文本没有问题。但是，在Firefox和Edge / IE上，我无法使用相同的代码定位外部文本。我找到了Firefox的黑客攻击，你将在下面看到@-moz-document url-prefix()。

我能错过什么？

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

＆＃13;
＆＃13; 
.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;
    }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

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

而不是使用bottom: -59px，这似乎在浏览器中呈现不同，这种替代方案可能更精确，更有效：

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

＆＃13;
＆＃13; 
.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;
    }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

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

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

使用此功能，无论您设置的宽度如何，文本都将始终水平居中。

Fiddle demo

Stack snippet 

.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>

相关问题
最新问题