Question

我将两个images并排放在header下col-50下的一个页面上。问题是我希望两个图像都具有完整的50%宽度，而不会在任何边缘周围填充任何边框。我似乎无法用CSS

来解决这个问题

  <div class="col col-50 row-no-padding">
    <img src="img/facebook.jpg" style="width:100%; display: inline-block">
    </div>

    <div class="col col-50 row-no-padding">
     <img src="img/twitter.jpg" style="width:100%; display: inline-block">
     </div>

以上工作在我的浏览器（离子服务）中，但在我的设备上无效。

Answer 1

问题是图像被认为是内联的，因此任何空格都被视为空格，试试这个：

<!-- both images should be in-line to have it working -->

<img style="width:50%; display: inline-block" src="the_image_source"/>

<img style="width:50%; display: inline-block;" src="the_image_source/>

如果您愿意，也可以隔离css

img{
        style: inline-block;
        width: 50%;
}

Answer 2

你可以使用：

no-padding

到col div

<ion-row>
    <ion-col col-6 no-padding></ion-col>
    <ion-col col-6 no-padding></ion-col>
</ion-row>

请参阅Grid

的离子文档

希望这有帮助。

离子两个图像并排充满

2 个答案: