1

我有一个 3 div，其显示属性设置为表格单元格。Div 1 是固定宽度（22px）。Div 2 需要占用剩余的可用空间。Div 3 需要固定在右侧，并且只占用其中的文本。

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

无剪辑文本

大胆的总数被推离了屏幕

这是一个移动网络应用程序。理想情况下，如果 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 描述的技术的结果如下

4

2 回答 2

3

你可以用花车来做，而且效果很好。

  • 将浮动（左或右）赋予其内容具有固定宽度或宽度的元素。
  • 以及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将and添加white-space: nowrap;到块 'c' 以使用看起来比普通剪辑更酷的 '...' 剪辑溢出的文本。

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

于 2013-08-09T19:30:34.783 回答
0

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

为什么不直接设置width到.a10%、.b80% 和.c10%？如果您不定义高度，则 a 的内容.b只会跳到第二行。

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

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

但要小心，.liContainer应该有

position: relative;

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

这可能无法解决整个问题，.b我猜你仍然需要使 div 小于 100%。

于 2013-08-09T19:11:13.567 回答