三列内部有自动换行但元素之间没有换行符答案

【问题标题】：Three columns with word-wrap inside but no line-break between the elements三列内部有自动换行但元素之间没有换行符
【发布时间】：2013-01-30 12:50:54
【问题描述】：

我正在尝试实现以下布局：

 +--------------------+  +-------------------+ +--------------------+ 
 | Right column with  |  | small center with | | Right column with  |
 | multiple lines and |  | fixed width       | | multiple lines and | 
 | width of           |  |                   | | width of           |
 | (100%-center)/2    |  |                   | | (100%-center)/2    |
 +--------------------+  +-------------------+ +--------------------+

但是使用我当前的标记，当它的内容变得太大而无法容纳该行时，右列将移动到其余部分下方，而不是在其自身内部引入换行符：

 +--------------------+  +-------------------+ 
 | Right column with  |  | small center with | 
 | multiple lines and |  | fixed width       | 
 | width of           |  |                   | 
 | (100%-center)/2    |  |                   | 
 +--------------------+  +-------------------+ 

 +-------------------------------------------+ 
 | Right column with multiple lines and...   |
 +-------------------------------------------+

这是我当前的标记：

<div style="text-align: center;">
    <span style="float: left;">left</span>
    <span>center</span>
    <span style="float: right;">right</span>
</div>

如何实现所需的布局？谢谢！

【问题讨论】：

你为你的跨度设置了宽度吗？
不，左右跨度应该占据所有可用空间（即（100%-（中心宽度））/2）
不知道如何在不定义中心 div 的情况下制作它，这里是 %：jsfiddle.net/UPwJ8

标签： html css css-float word-wrap multiple-columns

【解决方案1】：

您可以在不修改标记的情况下执行此操作：

.container {
    display: table;
}
.container span {
    display: table-cell;
}

<div class="container">
    <span>left</span>
    <span>center</span>
    <span>right</span>
</div>

http://jsfiddle.net/R3X4q/

【讨论】：

我喜欢不使用表格，但中心并不总是在该解决方案中居中。这可以解决吗？
我对新的更好的方法很感兴趣并乐于接受。
具体取决于您所说的居中是什么意思。您可以使第一个和最后一个跨度具有相同的宽度：jsfiddle.net/R3X4q/1。或者你可以使用text-align:jsfiddle.net/R3X4q/2
第一个jsfiddle就是我的意思，但我不知道中心单元格的宽度。但是，将左侧和右侧单元格的宽度设置为 50% 效果很好！谢谢。
不确定是否可以将中心作为固定宽度并且在第一个和最后一个宽度未知时完全居中。不过，这可能对 flexbox 是可行的。

【解决方案2】：

在我看来像一张桌子？

<div style="text-align: center;">
    <table style="width:100%;border-spacing:0px;">
        <tr>
            <td style="float: left;">left</td>
            <td style=" width: 100px; margin: 0 auto auto auto;">center</td>
            <td style="float: right;">right</td>
        </tr>
    </table>
</div>

【讨论】：

但这不是表格数据。
没错，但这是迄今为止最好的解决方案
有什么区别？你可以在表格单元格中放任何东西吗？
不同的是table标签是针对表格数据的。表格不适用于布局。
你说得对不应该做布局，但是如果没有等效呢？