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，因此您可能需要添加最小高度值以保留颜色模式（左侧为黑色，右侧为红色））。

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

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

表格单元格 - 宽度：100％，表格布局：固定;

1 个答案: