如何在100％宽度的div上换行？

Question

我有一个3格，其显示属性设置为table-cell。 Div 1是固定宽度（22像素）。 第2部门需要占用剩余的可用空间。 Div 3需要固定在右侧，并且只占用其中的文本。

所以我遇到的问题是，当Div 2的内容太大时，它将Div 3推离屏幕。

这是一个移动Web应用程序。 理想情况下，如果要推送屏幕的粗体总计，则将发生Div 2中的文本将被剪切的情况。 我可以用javascript来做，但不要以为应该这样做。

这是列表项的模板代码：

<div class="liContainer">
    <div class="cell a"><img src="badge.png" width="20px"/></div>
    <div class="cell b">{title}</div>
   <div class="cell c"><b>{total}</b></div>
</div>

这是CSS：

.cell{
    display: table-cell;
    vertical-align: middle;
}

.a{
    width: 22px;
    padding-right: 15px;
}

.b{
    width: 100%;
}

.c{
    text-align: right;
}

.liContainer{
    width: 100%;
    display: table-row;
}

编辑：下面应用Jithesh技术的结果描述

Answer 1

您可以使用浮子来完成它，并且效果很好。

• 将float（左或右）赋予宽度固定或宽度固定的元素。
• overflow: hidden在应该占用剩余宽度的元素上。

重要提示：单元格必须按照a> c> b的顺序排列，因为浮动单元格必须位于div占据剩余空间的前面。

这是html：

<div class="liContainer">
    <div class="a cell"><img src="https://www.google.co.in/images/srpr/logo4w.png" width="20px"/></div>
    <div class="c cell"><b>197</b></div>
    <div class="b cell">Hey, This is the long long long title</div>
</div>

和CSS

.cell{
    padding: 20px 10px;
}

.a{
    width: 22px;
    padding-right: 15px;
    float: left;
    background: #ccc;
}

.b{
    overflow: hidden;
    background: #eee;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c{
    float: right;
    background: #ccc;
}

.liContainer{
    width: 100%;
    //display: table-row;
}

更多改进

添加text-overflow: ellipsis和white-space: nowrap; 到'c'块，用'...'剪切溢出的文本，看上去比普通剪切还酷。

在这里查看： http : //jsfiddle.net/Y3JEr/

Answer 2

可以做的是，如果b. 将会太大，它将文本包装到第二个“行”（如果需要，整个部分的高度将增加一倍）。 为此，您必须设置width: 100%以外的其他内容width: 100% .b容器的width: 100% 。

为什么不将.a width设置为10％ .b width设置为80％ .c width设置为10％？ 如果您不定义高度，则.b的内容将跳至第二行。

---

另外，如果您需要将右div固定在屏幕的右侧，请像这样为他设置绝对位置

.c {
    position: absolute;
    right: 0px;
}

但是要小心， .liContainer应该具有

position: relative;

否则， .c的绝对定位将不起作用。

这可能无法解决整个问题，我仍然需要将.b div设置为小于100％。