1

我知道有一百万篇类似的文章，我花了几个小时尝试它们都无济于事。我希望必须有三列，并允许每列占用尽可能多的空间，但整个容器不超过一个固定值（在本例中为 500 像素）。左列必须始终向左冲洗，而右柱必须始终向右冲洗。通常左列和/或右列将是空的，并且中心应该使用整个宽度。

我当然可以使用具有固定布局的表格或具有固定大小的 div 来完成此操作，但是，我希望能够动态重用相同的容器来显示一、二或三列数据，然后使用可用的整个宽度。我绝对可以允许对第 1 列和第 3 列中的内容进行固定，尽管它似乎没有帮助。

这是一个例子：

<div style="width:500px;background:#ff0000;max-width:500px;">
    <div style="background:#00ff00;float:left;display:table-cell;">
          col1
    </div>
    <div style="background:#ff00ff;float:left;display:table-cell;overflow:hidden;text-overflow:elipsis;white-space:nowrap;">
          REALLY LONG DO NOT EXCEED 500 - WIDTH COL 1 AND COL2 SOMEHOW WOULD BE NICE
    </div>
    <div style="background:#00ffff;display:table-cell;float:right;">
          col3
    </div>
</div>

抱歉，无法显示上述输出，因为它不允许我发布图像。

4

0 回答 0