我在 iPhone(Retina 显示屏)上的 Safari 浏览器中遇到图像位置问题。正如您可能看到的,当网站处于移动版本时,我将 flex-direction
从 row
更改为 column
和图像大小,因为它被忽略了。它与 div.text
编辑:已解决:
我刚刚从 .avatar-wrap
行中删除了 flex: 0 0 20%
并且一切正常。
HTML:
<div class="reference">
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>
<div class="avatar-wrap">
<img src="./assets/img/avatar.png" class="avatar">
<div>
John Doe <br>CEO at <a href="johncompany.com">johncompany.com</a>
</div>
</div>
</div
和 CSS:
div.reference
width: 90%
display: flex
align-items: center
color: gray
margin-top: 20px
@media screen and (max-width: 1240px)
flex-direction: column
width: 100%
font-size: .9em
p
padding: 20px
&:before
content: '“'
&:after
content: '”'
.avatar-wrap
flex: 0 0 20%
display: flex
flex-direction: column
justify-content: center
align-items: center
div
margin-top: 15px
text-align: center
a
color: black
.avatar
max-height: 256px
最佳答案
已解决:我刚刚从 .avatar-wrap
行中删除了 flex: 0 0 20%
并且一切正常。
关于html - 为什么在 Safari 移动设备上使用 flexbox 的图像位置会损坏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41533544/