post-author-date中设置flex的问题

来源:17-6 构建新闻列表(下)

weixin_慕慕5397908

2020-01-30

1.post-author-date里面设置的样式影响了对象哪些属性?我把它注释掉小程序也完全没有变化;
2.还是在这个post-author-date中,按照视频里面的加入flex后反而不对齐了。代码如下,完全无法对齐。
3.在设置样式上下左右边距时,这个距离是相对什么而言的呢?例如两个临近的对象,如果设置对象1margin-bottom 10rpx,对象2margin-top 10rpx,两者距离就是20rpx?

<view>
  <swiper autoplay="true" indicator-dots="true" interval="4900">
    <swiper-item><image src="/images/wx.png">
    </image></swiper-item>
    <swiper-item><image src="/images/vr.png">
    </image></swiper-item>
    <swiper-item><image  src="/images/iqiyi.png">
    </image></swiper-item>
  </swiper>
<view class="post_container">
  <view calss="post-author-date">
    <image class="post_author_image" src="/images/avatar/2.png"></image>
    <text class="post_author_text">Sep 18 2020</text>
  </view>
  <view>
    <text class="post_title">正是虾肥蟹壮时</text>
  </view>
  <view>
    <image class="post_image" src="/images/post/crab.png "></image>
    <text class="post_text">霹雳吧啦~噼里啪啦~霹雳吧啦~噼里啪啦~霹雳吧啦~噼里啪啦~霹雳吧啦~噼里啪啦~霹雳吧啦~噼里啪啦~霹雳吧啦~噼里啪啦~霹雳吧啦~噼里啪啦~霹雳吧啦~噼里啪啦~霹雳吧啦~噼里啪啦~</text>
  </view>
  <view class="post_like">
    <image class="post_like_image" src="/images/icon/chat.png" ></image>
    <text class="post_like_text">96</text>
    <image class="post_like_image" src="/images/icon/view.png "></image>
    <text class="post_like_text">112</text>
  </view>
</view>  
</view>

css

swiper{
  width:100%;
  height:600rpx;
}
swiper image{
  width:100%;
  height:600rpx;
}
.post_container{
  display:flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-top:5px splid #ededed;
  border-bottom:5px solid #ededed;
  padding-bottom: 10rpx;
}
.post-author-date{
  margin-top:10rpx;
  margin-bottom:20rpx;
  margin-left:10rpx;
  display:flex;
  flex-direction:row;
  align-items:center;
}
.post_author_image{
  width:60rpx;
  height:60rpx;
  /* vertical-align:middle */
}
.post_author_text{
  margin-left: 20rpx;
  font-size: 26rpx;
  /* vertical-align:middle */
}
.post_title{
  font-size: 34rpx;
  font-weight: 600;
  margin-bottom: 10px;
  margin-left: 10px;
  color: #333;
}
.post_image{
  width:100%;
  height:340rpx;
  margin-bottom: 5rpx;
}
.post_text{
  font-size: 18rpx;
  color: #666;
  letter-spacing: 2rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
}
.post_like{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 26rpx;
  margin-left: 20rpx;

}
.post_like_image{
  width:32rpx;
  height:32rpx;
  margin-right: 16rpx;
}
.post_like_text{
  margin-right: 40rpx;
}
写回答

1回答

7七月

2020-02-04

第一个问题,这个需要你更详细的描述。

第二个问题,是上下都设置有可能会引起 塌陷,只计算一个margin,这个具体搜索下。

0
0

微信小程序入门与实战(全新版) 超20000人学习的好课

4年同步微信官方迭代,累计20000+人学习, 比微信官方更火爆!

23867 学习 · 6899 问题

查看课程