Html DIV中动态调整大小的元素

我有一个DIV和3个内联元素

中心元素是一个动态文本，我无法预测其宽度。文本在DIV中水平居中。DIV具有固定大小

我希望左边的元素被锚定到左边并流动，直到它到达文本；类似地，右边的元素应该在文本之后开始，在DIV的末尾结束（右边：0或其他）

最终的结果是这样的：

111111 my-text 222222

1111 longer-text 2222

宽度之和始终等于DIV的宽度，左侧元素的大小等于右侧元素的大小

有什么好办法吗

编辑：

我认为只有两种方法可以使用javascript或表。我用过桌子，效果很好

div
{
    display: table;
}

#111, #222
{
    width: 100%;
    display: table-cell;
}

---

您应该能够给出中心元素宽度：100%；和文本对齐：居中

您应该能够给出中心元素宽度：100%；和文本对齐：居中

也许吧

<div style="width:500px;border:1px solid #000;">

<span>1111</span>
<span style="text-align:center">dynamic text</span>

<span style="text-align:right; float:right;">2222</span>

</div>

1111
动态文本
2222

也许吧

<div style="width:500px;border:1px solid #000;">

<span>1111</span>
<span style="text-align:center">dynamic text</span>

<span style="text-align:right; float:right;">2222</span>

</div>

1111
动态文本
2222

这项计划的最终目标是什么？可能有更好的方法解决这个问题。左右元素的大小是否固定？不幸的是，它们不是。最终的目标是有一个居中的文本和一些左右装饰（装饰是不同的），可能是一些SVG矩形或类似的。这的最终目标是什么？可能有更好的方法解决这个问题。左右元素的大小是否固定？不幸的是，它们不是。最终的目标是有一个居中的文本和一些左右装饰（装饰是不同的），可能是一些SVG矩形或类似的。其他元素呢？它们不是固定大小的，它们必须填满剩余的空间。其他元素呢？它们不是固定大小的，它们必须填满剩余的空间。