我正在尝试在一组div上使用flexbox，效果很好。div 在所有浏览器上都正确定位，间距适中。
然而，在每个div中，我正在努力使用绝对定位来定位一些文本。
我只想对某些图像执行的操作是在其父图像下方放置一个p标签，该标签位于其父图像下方 11px。在其他方面，我想将p标签放置在父标签内。
我可以在所有浏览器中毫无问题地定位内部文本。但是，在Firefox和Edge/IE上，我不能使用相同的代码定位外部文本。我发现了一个针对 Firefox 的黑客，您将在下面看到它使用@-moz-document url-prefix().
我可能缺少什么？
请注意，我不是在问柔性容器的孩子，而是孙子孙女。我仔细阅读的许多问题只涉及儿童。我这里的孩子很好。是孙子孙女有问题。
.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>您希望外部文本位于父文本下方 11px。
而不是使用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>一种选择是根本不设置top或bottom，而是让它使用标记设置的位置，然后使用margin-top将其向下移动。
我还删除了所有.cirlce-outer p规则(包括媒体查询(中的负left设置，而是添加了一次：
left: 50%;
transform: translateX(-50%);
这样，无论您设置的宽度如何，文本都将始终水平居中。
小提琴演示
堆栈代码段
.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>