.comment-item-box { margin: 10px 0 0 0; padding: 15px 5px 0 5px; border-top: 1px solid #929292; } .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-content { margin: 10px 0 20px 0; word-break: break-all; margin-bottom: 10px; } .comment-item-bottom { margin: 0px auto; } .comment-item-bottom-left { float: left; user-select: none; color: #d5d5d5; } .comment-item-bottom-right { float: right; margin-left: 5px; cursor: pointer; } .comment-favor { /* font-size: 20px; */ } .comment-favored { color: #4a90e2; } .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; } .comment-item-icon { float: right; margin-left: 10px; } @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; } }