Question

我有一个父容器和两个div：

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

使用以下CSS：

.container {
    max-width: 500px;
}
.left {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
    margin-right: 10px;
}

.right {
    font-weight: 900;
}

左侧div包含任务描述，右侧div包含计时器。像这样：

---------------------------------------------
|                  Fixing window frame|02:35|
---------------------------------------------

随着计时器的进展，它的大小会增加。因此，如果左侧div中的任务描述不合适，它应该填充它可以的空间，然后以省略号结束：

---------------------------------------------
|Working on garage door motor as...|10:15:50|
---------------------------------------------

---------------------------------------------
|Working on garage door ...|2 days, 12:45:10|
---------------------------------------------

两个div中的所有文本都应该在同一行。我该怎么办呢？我不关心旧的浏览器兼容性

Answer 1

您需要重新订购html

<div class="container">
    <div class="right"></div>
    <div class="left"></div>
</div>

并将.right css更改为

.right {
    float:right;
    font-weight: 900;
}

http://jsfiddle.net/gaby/d6H5H/1

演示

两个单线，流体div，固定容器，其中一个扩展

1 个答案: