.container {
    display: flex;
    flex-direction: column;
}

.head-image {
    width: 100%;
    height: 460rpx;
}

.hide{
    opacity: 0;
}

.audio {
    width: 102rpx;
    height: 110rpx;
    position: absolute;
    left: 50%;
    margin-left: -51rpx;
    top: 180rpx;
    opacity: 0.6;
}

.author-date {
    flex-direction: row;
    margin-left: 30rpx;
    margin-top: 20rpx;
}

.avatar {
    height: 64rpx;
    width: 64rpx;
    vertical-align: middle;
}

.author {
    font-size: 30rpx;
    font-weight: 300;
    margin-left: 20rpx;
    vertical-align: middle;
    color: #666;
}

.const-text {
    font-size: 24rpx;
    color: #999;
    margin-left: 20rpx;
}

.date {
    font-size: 24rpx;
    margin-left: 30rpx;
    vertical-align: middle;
    color: #999;
}

.title {
    margin-left: 40rpx;
    font-size: 36rpx;
    font-weight: 700;
    margin-top: 30rpx;
    letter-spacing: 2px;
    color: #4b556c;
}

.tool {
    margin-top: 20rpx;
}

.circle-img {
    float: right;
    margin-right: 40rpx;
    vertical-align: middle;
}

.circle-img Image {
    width: 90rpx;
    height: 90rpx;
}

.share-img {
    margin-left: 30rpx;
}

.horizon {
    width: 660rpx;
    height: 1px;
    background-color: #e5e5e5;
    vertical-align: middle;
    position: relative;
    top: 46rpx;
    margin: 0 auto;
    z-index: -99;
}

.detail {
    color: #666;
    margin-left: 30rpx;
    margin-top: 20rpx;
    margin-right: 30rpx;
    line-height: 44rpx;
    letter-spacing: 2px;
}```
如上为，post-detail的css
以下为 开发工具渲染图
![图片描述](http://img.mukewang.com/szimg/5f6392df09bda14d03720399.jpg)
作者部分 居中了而且 上面出现了一大片空白