html - 卡住从动态大小的文本转移的 div

Question

在下面的代码中，我有 3 个 div，其中第一个和第三个 div 是在用户提交时填充了不同长度(由用户决定)的文本的表格。第二个 div 是图像。当用户提交并将文本填充到表格中时，中心图像(第二个 div)会根据文本的长度移动。例如，如果任一表中最长的单词在左表中，则图像将与右表一起向右移动。如果每个表中最长的单词长度相同，则什么都不会移动。

我可以使用什么 CSS 定位来确保第二个 div 保持居中，无论其两侧的 div 中的文本长度如何？本质上，我希望第一个 div 向左扩展，第三个 div 向右扩展，以便 <span> 的长度发生任何变化。根本不会移动居中的图像

<div class="text_tables" id="left_table">
    <table>
        <tr>
            <td>
                <span class="output render" id="text1"></span>
            </td>
        </tr>
    </table>
</div>
<div class="text_tables">
    <img id="img1" src="{{ url_for('static', filename='img/img.png') }}">
</div>
<div class="text_tables" id="right_table">
    <table>
        <tr>
            <td>
                <span class="output render" id="text6"></span>
            </td>
        </tr>
    </table>
</div>

Answer 1

好吧，为了向那些说表格不应该用于布局的人致敬，我整理了一些 FIDDLE只有 div。

这是您正在寻找的行为类型吗？

HTML

<div class='holderdiv'>
  <div class='leftdiv'> asdfasdfasdf</div>
  <div class='centerdiv'></div>
  <div class='rightdiv'>ASDASDFASDFASDFASDF </div>
</div>

---

V 2.0

好的，这个FIDDLE似乎做了很多你想做的事。

我对你想要的东西有点困惑。我们是否需要解析所有空格并将单词排列在任一侧翼的单个列中？

请提供更多详细信息，我可以进一步完善它。