Question

我是离子框架开发的新手。我使用网格布局创建了一个带图像按钮的页面。但相互重叠。

这是我的代码：

  <center>
  <br>
  <div class="row">
  <div class="col ">
  <a class="button button-clear" href="#/app/deals">
  <img src="img/bagnew.jpg" width="70%">
  </a>
  </div>
 <div class="col">
<a class="button button-clear" href="#/app/search">
<img src="img/search.jpg" width="70%">
</a>
</div>
</div>
</center>
<center>
<div class="row">
<div class="col ">
<a class="button button-clear" href="#/app/favourites">
<img src="img/star.jpg" width="80%" >
</a>
</div>
<div class="col">
<a class="button button-clear" href="#/app/news">
<img src="img/paper.jpg" width="70%" >
</a>
</div>
</div> 
</center>

星形和纸张图像按钮与bagnew和搜索图像按钮的一半重叠。

请帮忙。谢谢

Answer 1

Ionic在加载图片时使用了内置的css类，您可以尝试将item-image类添加到呈现图像的div。修改后的代码

包含两个列网格的col-50和
item-image在列中呈现图片。
已移除为width代码

img

整个更改后的代码如下：

<div class="row">
 <div class="col col-50 item-image ">
  <a class="button button-clear" href="#/app/deals">
   <img src="img/bagnew.jpg">
  </a>
 </div>
 <div class="col col-50 item-image">
  <a class="button button-clear" href="#/app/search">
   <img src="img/search.jpg">
  </a>
 </div>
</div>
<div class="row">
   <div class="col col-50 item-image ">
    <a class="button button-clear" href="#/app/favourites">
     <img src="img/star.jpg">
    </a>
   </div>
   <div class="col col-50 item-image">
    <a class="button button-clear" href="#/app/news">
      <img src="img/paper.jpg">
    </a>
  </div>
</div>

按钮Ionic Framework的重叠

1 个答案: