我是离子框架开发的新手。我使用网格布局创建了一个带图像按钮的页面。但相互重叠。
这是我的代码:
<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和搜索图像按钮的一半重叠。
请帮忙。谢谢
答案 0 :(得分:0)
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>