注意: positiojn:fixed; bottom:0px; align-items:center;  33%

.comment{
  width:100%;
  height: 42px;
  background-color: #F4F5F7;
  position: fixed;
  bottom: 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

今日头条源码剖析.comment css

.nav-item{
  width:33%;
  font-size: 13px;
  padding-top:10px;
  padding-bottom: 10px;
}

 如果 有3 张图 每张 width:33%

.hr{
  width:100%;
  height: 15px;
  background-color: #F4F5F6;
}

今日头条源码剖析.comment css

.nav{
  display: flex;
  flex-direction: row;
  text-align: center;
}

今日头条源码剖析.comment css

  <view class="nav">
    <view class="nav-item">
      <view>
         <image src="/images/icon/shoucang.jpg" style="width:23px;height:23px;"></image>
      </view>
      <view>收藏</view>
    </view>
    <view class="nav-item">
      <view>
         <image src="/images/icon/lishi.jpg" style="width:23px;height:23px;"></image>
      </view>
      <view>历史</view>
    </view>
    <view class="nav-item">
      <view>
         <image src="/images/icon/yejian.jpg" style="width:23px;height:23px;"></image>
      </view>
      <view>夜间</view>
    </view>
  </view>

 

相关文章:

  • 2021-12-02
  • 2021-07-03
  • 2021-12-31
  • 2022-01-07
  • 2021-07-22
  • 2021-08-24
  • 2021-11-26
  • 2021-04-21
猜你喜欢
  • 2022-01-18
  • 2021-06-16
  • 2021-09-13
  • 2021-09-10
  • 2021-09-19
  • 2021-05-18
  • 2021-12-10
相关资源
相似解决方案