如何在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％。