Question

我有一行带有1个图标和2个文本 - 我想在该行的最右侧显示最右边的文本，其他项目左对齐。

我正在努力让代码保持尽可能精简，所以我想看看是否可以不使用浮点数，而不包含每个自己的<div> 以及没有JS （这就是为什么我无法从这里提出的类似问题找到合适的答案）。

这是JSFiddle，我想在行的最右边显示 Break 这个词，让任务占用包含div的其余宽度的：
的 http://jsfiddle.net/2w1cu71e/

提前感谢您提供给我的任何帮助，我发现在CSS最佳实践中找到确定的资源有点困难（除了CSS技巧！）。分级表

Answer 1

您只需要将position:absolute;right:0;添加到.task-category，但如果您没有理由使用元素，则此标记可能会更简单。

总而言之，我没有看到使用浮动的区别。还有一个问题是为什么是内联块，但你有理由。

Answer 2

我认为使用标记没有意义，会更好地完成这项工作。对于布局，我认为CSS table table-row table-cell可以作为Flexbox的一个很好的选择，它适用于所有浏览器。

DEMO： http://jsfiddle.net/2w1cu71e/1/

#done {
    display: table;
    width: 100%;
}
.desc-single-line {
    display: table-row;
}
.desc-single-line i,
.desc-single-line span {
    display: table-cell;
}
.desc-single-line i {
    width: 20px;
}
.desc-single-line span {
    font-size: 0.8em;
    font-family: 'Open Sans', sans-serif;
}
.desc-single-line .task-category {
    color: red;
    text-align: right;
}

Answer 3

你可以试试这个而不是提供的CSS吗？出于某种原因，它不适用于jsfiddle但它在本地html文件上运行得很好。

.desc-single-line {
    display: flex;
    flex-direction: row;
}

.task-category{
    color:red;
    text-align: right;
    flex: 2;
}

.desc-single-line p{
  font-size: 0.8em;
  font-family: 'Open Sans', sans-serif;
}

右键对齐</p> <div>中的<p>而不使用浮点数</div>

3 个答案: