使用Ionic的矩形缩略图和项目文本换行？

Question

我对Ionic很新，我有一个简单的问题，我无法在文档中找到。

有没有办法使用Ionic类简单地将现在位于图像下方的内容对齐到左侧？

我目前的代码是：

   <ion-item class="item-left item-text-wrap">
   <img src="http://placehold.it/100x150" alt="Poster">
   <h2>Title</h2>
   <h3>Something else</h3>

谢谢！

Answer 1

请参阅此演示：http://play.ionic.io/app/e8f309f71714
您不需要为此做任何样式，离子缩略图对您最有用，请参阅此处Documentation。 这就是你要做的事情

<ion-item class="item-thumbnail-left item-text-wrap">
  <img src="http://placehold.it/100x150" alt="Poster" class="customized-image">
  <h2>Title</h2>
  <h2>Something else</h2>
  <p>your large content goes here</p>
</ion-item>

item-thumbnail-left类由ionic提供。您只需制作一些样式类来制作图像矩形。因为默认情况下图像是方形的。这就是类看起来像

的样子

.customized-image{
  max-height: 100px !important;
}

应该将

customized-image类添加到图片标记中。就是这样，不再有自定义样式。

Answer 2

您可以使用inline-block

来完成它

.item-left img {
   display: inline-block;
   width: 33%; /* or waterver you need = w1 */
   vertical-align: top;
}
.item-left h2,.item-left h3 {
   display:inline-block;
   width: 66%; /* (100-w1)% */
   vertical-align: top;
}