.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-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: #4a90e2; } @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; } }