html - 表格单元格 - 宽度：100% 表格布局：固定；

Question

这是没有table-layout: fixed http://jsfiddle.net/CDUBv/11/ 需要的代码，table-layout: fixed因为它是这样工作word-wrap: break-word的。但是，在这里，如果我添加它会发生什么：http: //jsfiddle.net/CDUBv/12/如何解决？word-break: break-all在第一页或在第一个 div 中添加稳定的宽度不是解决方案。

Answer 1

这是一种可能接近您需要的不同方法。

HTML 是：

<div id="table">
    <div id="t1">
        <img src="..."  width="50" width="50"/>
        <img src="..."  width="50" width="50"/>
    </div>
    <div id="t2">T2T2T2T2T2T2T2T2T2T ... T2T2T2T2T2T2T2T2T2T2T2T2T2</div>
</div>

和CSS：

#table{
    display: block;
    overflow: auto;
    width: 100%;
    margin-top: 100px;
    background-color: black;
}
#t1{
    float: left;
}
#t1 img {
    vertical-align: top;
}

#t2{
    word-wrap: break-word;
    overflow: auto;
    background-color: red;
}

我向左浮动#t1以在图标周围缩小以适应宽度。

然后，里面的内容#t2将填满宽度的剩余部分。

获取背景颜色的技巧是将黑色添加到父容器，将红色添加到非浮动子元素。

限制

如果您的内容很短，则#t2元素将比您更短，#t1因此您可能需要添加一个 min-height 值以保留颜色模式（左侧为黑色，右侧为红色）。

如果要将图标垂直居中，则可能需要为图标指定宽度#t1，然后绝对定位图标。

参见演示：http: //jsfiddle.net/audetwebdesign/5j5Hz/