将div定位在使用flex CSS属性的图像上

更新时间：2022-10-21 09:53:15

To accomplish that you need a wrapper around the image and text, that take the size of the image.

Here is a sample code, where I added an extra wrapper, image, around the anim, and then made the anim display as inline block.

Here the image wrapper become the flex item instead, and will allow the anim to behave and be sized as the image, and create the boundaries you need to be able to place the eyes at a fixed position on top the image.

Stack snippet

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

上一篇 : ：如何将div定位在另一个div中？下一篇 : 使用JavaScript将div定位在一个圆中

将div定位在使用flex CSS属性的图像上

相关阅读

技术问答最新文章