如何用 CSS 重新排列这些元素？

Question

CodePen： http://codepen.io/leongaban/pen/ndFgs

所以我有一个有 2 列的表格，左列是 60% 宽度，右列是 40%。

在左列内部，我有一个需要居中的 div，在该 div 内部还有 3 个其他元素（一个 span with a list，另一个带有测试的 span 和另一个 span with a list）。

这些元素需要并排浮动，直到浏览器的大小调整到足够小以进行媒体查询，然后使跨度最终彼此重叠。

这是我想要实现的完美示例：

但是，这就是我的问题发挥作用的地方。为了确保包含这 3 个元素的 div 保持在左侧表格列的中心。我必须在上面设置一个固定的宽度：

margin: 0 auto;
max-width: 200px; // or width: 70%;

但是，如果任何元素的名称、头衔或公司非常长，则会破坏布局。

我的 CodePen 布局示例：http://codepen.io/leongaban/pen/ndFgs

布局工作示例：

由于名称太长而导致布局损坏的示例

所以这就是我卡住的地方，如果名称太长，其中一个元素（第三个跨度）会无意中被扔到第二行。因为我的宽度是固定的。

我能想到的唯一解决方案是使用jQuery 检查所有跨度的宽度，如果加起来的宽度总和大于浮动容器的宽度，则故意重新排列元素.

你会如何解决这个问题？

我希望我可以使用 Flex-box，但我们必须至少支持 IE8。 :(

Answer 1

为跨度“#the_requested”指定特定宽度将导致溢出转到新行。例如

#the_requested {
background: purple;
width: 168px;

}

示例： http://codepen.io/anon/pen/zIhca

显然，您希望使左侧跨度的宽度与右侧的跨度相匹配。那么 span left+center+right 应该是 parent 的宽度。