css如何写才能一行有三张图片？

Question

现在是这样的，我想实现一行有三张图片。

前端的代码：

   <view bindtap="bindDetail" id="{{item.id}}">
              <view style="position: relative;height: 300rpx">
                <image mode="aspectFill" class="index_article_cover" src="{{item.meta.thumbnail}}"></image>
                <view class="index_article_during">
                  <text>{{item.category[0].name}}</text>
                </view>
              </view>
              <view class="index_article_title">{{item.title.rendered}}</view>
            </view>

CSS的代码：
图片的

.index_article_cover {
  width: 30%;
  height: 300rpx;
  border-radius: 10rpx;
}

文字的：

.index_article_title {
  font-size: 21rpx;
  font-weight: 400;
  color: rgba(38,38,38,1);
  line-height: 50rpx;
  margin-top: 5rpx;
  margin-bottom: 10rpx;
  width: 220rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

请问下我需要怎么修改。

Answer 1

使用行内元素，可以变为1行

display: inline-block;