.comment-item-box { margin: 10px 0 0 0; padding: 15px 5px 0 5px; border-top: 1px solid #eee; } .comment-item-left { display: inline-block; vertical-align: top; width: 40px; } .comment-item-right { display: inline-block; width: 90%; margin-left: 10px; margin-bottom: 20px; } .comment-item-avatar { width: 40px; height: 40px; border-radius: 20px; background-position: center; background-size: cover; cursor: pointer; } .comment-item-content { margin: 10px 0; word-break: break-all; } .comment-item-bottom { margin: 20px auto; } .comment-item-bottom-left { float: left; user-select: none; } .comment-item-bottom-right { float: right; margin-left: 5px; cursor: pointer; } .comment-favor { font-size: 20px; } .comment-favored { color: #c00; } .comment-item-image { width: 400px; max-width: 100%; } .comment-item-image .comment-item-image-wrapper { float: left; width: 25%; box-sizing: border-box; padding: 5px; } .comment-item-image .comment-item-image-wrapper .comment-img-thumbnail { background-position: center; background-size: cover; display: inline-block; width: 100%; height: 0; padding-bottom: 100%; border-radius: 5px; cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined"), auto; } .comment-item-image .comment-item-image-wrapper .comment-img-divider { display: inline-block; width: 100%; height: 0; padding-bottom: 100%; border-radius: 5px; } .comment-item-image .comment-img { margin-right: 10px; } .avatar-hover-card-overlay { padding-top: 0; } .avatar-hover-card-overlay .ant-popover-inner-content { padding: 0; } .avatar-hover-card-overlay .ant-popover-arrow { display: none; } @media screen and (max-width: 616px) and (min-width: 449px) { .comment-item-right { display: inline-block; width: 85%; margin-left: 10px; } } @media screen and (max-width: 449px) and (min-width: 365px) { .comment-item-right { display: inline-block; width: 80%; margin-left: 10px; } } @media screen and (max-width: 365px) { .comment-item-right { display: inline-block; width: 75%; margin-left: 10px; } }