离子框架：如何在每个列表项中制作两张图片？

Question

我如何创建它以便每个离子框架列表项都有两张图片：一张在左边，一张在右边？该文档仅支持一张图像 - 右对齐或左对齐。

创建右对齐的方法如下：

<div class="list">
<a class="item item-thumbnail-right" href="#">
  <img src="img/image1.jpg">
  <h2>First Vote</h2>
  <p>Question???</p>
</a>
</div>

但我需要它，所以每个项目都有 2 个缩略图。

提前致谢！！

Answer 1

您可以将离子网格系统用于您的用例：

将每个列表项可视化为一行并将其分为三列。例如，如果我将它们分成 25-50-20 的比例，它看起来像：

    <div class="list">
        <div class="row">
            <div class="col col-25">
                <img src="img/image1.jpg" />
            </div>
            <div class="col col-50">Your text</div>
            <div class="col col-25">
                <img src="img/image12.jpg" />
            </div>
        </div>
    </div>

离子框架：如何在每个列表项中制作两张图片？

Ionic Framework: How to make two pictures in each list item with?

html

cordova

ionic-framework

ionic