对于 Web 应用程序,我要在 div 中放置动画表情符号和一些文本。这些元素将以完全响应的方式保持分离。看:
我正在使用 flex
来完成这个。这确保即使屏幕尺寸变得非常小,通过将它们堆叠在一起仍然可以保持分离。
为了完成它,整个外部 div 被包裹在:
.act{
display: flex;
flex-wrap: wrap;
background-color: #E1F5FE;
padding: 10px;
border-radius: 10px;
align-items: center;
}
接下来,div里面的动画图片被包裹在:
.anim {
flex: 1 1;
min-width: 64px;
text-align: center;
}
.anim > img {
width: 100%;
height: auto;
max-width: 50px;
}
最后,文字和图片被包裹在:
.txt {
flex: 1 1 180px;
text-align: center;
}
你注意到表情符号上的泪珠了吗?这些与图像是分开的,并且将在 html5 中进行动画处理。
我不知道如何确保这些泪滴准确地停留在表情符号的眼睛周围。我试过将 z-index
与 position:absolute
一起使用(例如,请参见以下内容):
<div class="anim">
<div class="tear" style="z-index:2;position:absolute;margin-top: 30px;margin-left: 110px;"></div>
<div class="tear" style="z-index:2;position:absolute;margin-top: 30px;margin-left: 84px;"></div>
<img src="sad.png">
</div>
这根本没有响应。
此外,如果我尝试使用position:relative
,那么无论我设置什么z-index
,都无法将眼泪形状重叠在表情符号上。
请帮我解决这个问题。理想情况下,我想坚持使用 flex
,否则它非常适合我的需求。
注意:类似 SO question 的答案不要帮忙,因为我已经包含了他们的建议。
最佳答案
要实现这一点,您需要一个包装图像和文本的包装器,它采用图像的大小。
这是一个示例代码,我在 anim
周围添加了一个额外的包装器 image
,然后使 anim
显示为内联 block 。
这里 image
wrapper 变成了 flex item,并且将允许 anim
的行为和大小与图像相同,并创建你需要的边界将眼睛放在图像顶部的固定位置。
堆栈片段
.act {
display: flex;
flex-wrap: wrap;
background-color: #E1F5FE;
padding: 10px;
border-radius: 10px;
align-items: center;
}
.image {
flex: 1 1;
min-width: 64px;
text-align: center;
}
.anim {
display: inline-block;
position: relative;
}
.anim>img {
width: 100%;
max-width: 50px;
}
.txt {
flex: 1 1 180px;
text-align: center;
}
.tear {
position:absolute;
top: 10px;
left: 30px;
width: 10px;
height: 10px;
background: blue;
}
.tear:first-child {
left: 10px;"
}
<div class="act">
<div class="image">
<div class="anim">
<div class="tear"></div>
<div class="tear"></div>
<img src="http://placehold.it/150">
</div>
</div>
<div class="txt">
Some text
</div>
</div>
关于html - 使用 flex CSS 属性将 div 定位在图像之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47255661/