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,这个具体搜索下。
00
相似问题