Question

尽管文本只有一行，我如何将链接标题修改为两行？

当标题只有一行时， 评论和赞 按钮的位置变得不一致，如HERE所示。

我尝试使用花车无济于事。然后我尝试设置 div.info 亲戚的位置，并将我的评论和喜欢按钮设置为绝对，以便我可以将它们从文档流中取出，但不知何故，评论和类似按钮仍然是遵循文件流程。

.info
    height: 20em
    position: relative

.comment
    position: absolute
    margin-top: -1.5em
    font-size: 1.2em
    float: left
    padding-left: 3em
    a
        text-decoration: none
        color: white
        &:visited
            color: white
            font-weight: 700
.like
    margin-top: -1.5em
    font-size: 1.2em
    position: absolute
    top: 0
    bottom: 20px
    right: 20px
    // float: right
    padding-right: 3em

Answer 1

试试这个（删除这些元素的所有其他样式）：

.like {
    padding-right: 3em;
    float: right;
    font-size: 1.2em;
}

.comment {
    padding-left: 3em;
    float: left;
    font-size: 1.2em;
}

.info:after, .comment:after, .like:after {
    content: "";
    display: table;
    clear: both;
}

最后一部分是修复div高度，注意浮动时它们的高度是如何小于内部内容。有时你会强制高度，但通常不好 - 例如.info div的高度为20em，但是当浏览器认为它时，请在浏览器检查器中查看。

另外，如果你想在底部有更多的保证金，只需添加：

.info {
    margin-bottom: 30px;
}

Answer 2

试试这个（删除这些元素的所有其他样式）：

.like {
    padding-right: 3em;
    float: right;
    font-size: 1.2em;
}

.comment {
    padding-left: 3em;
    float: left;
    font-size: 1.2em;
}

.info:after, .comment:after, .like:after {
    content: "";
    display: table;
    clear: both;
}

最后一部分是修复div高度，注意浮动时它们的高度是如何小于内部内容。有时你会强制高度，但通常不好 - 例如.info div的高度为20em，但是当浏览器认为它时，请在浏览器检查器中查看。

另外，如果你想在底部有更多的保证金，只需添加：

.info {
    margin-bottom: 30px;
}

尽管内容只有一行，如何将标题固定为两行

2 个答案: