Question

.img1{
    background-color:red;
    height:100px;
    width:100px;
    float:left;
}
.arrow{
    content:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSO3ZJVteOkqFdOVDcy8HlfYwW4LerPJ6HZpsq53KJ9obfRoJPgbg)
    height:100px;
    width:100px;
    float:right;
}
.img2{
    background-color:yellow;
    height:100px;
    width:100px;
    float:left;
}

<div class="container">
    <div class="img1"></div>
    <div class="arrow"></div>
    <div class="img2"></div>
</div>

我有一个简单的网站，上面显示了更改的插图。
例子
Image1→Image2
Image3→Image4
在桌面视图中，其正常显示，但在iPhone视图中，→箭头显示为
Image1
→
Image2
在这里，我希望该箭头显示为
Image1
↓
Image2
我尝试将@media-screen与content:url(aaa.com/aa.jpg)一起使用
但是没有出现。
注意：-我正在使用“ elementor pro”页面构建器来构建网站

Answer 1

我建议您采用flexbox方法，只需在媒体查询中更改flex-direction并旋转arrow图标

.container {
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.img1,
.img2,
.arrow {
  background-color: red;
  height: 100px;
  width: 100px;
}

.img2 {
  background-color: yellow;
}

.arrow {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSO3ZJVteOkqFdOVDcy8HlfYwW4LerPJ6HZpsq53KJ9obfRoJPgbg) no-repeat 0 50%/100%;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .arrow {
    transform: rotate(90deg);
  }
}

<div class="container">
  <div class="img1"></div>
  <div class="arrow"></div>
  <div class="img2"></div>
</div>

更改平板电脑和移动视图上的内容

1 个答案: