Question

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

我可以使用什么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

嗯，为了纪念那些不应该使用表格进行布局的人，我只用div来组合一点FIDDLE。

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

HTML

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

V 2.0

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

我对你想要的东西感到有点困惑。我们是否需要解析所有空格并将单词中的单词排成一行？

提供更多细节，我可以多说一点。

冻结从动态大小的文本转移的div

1 个答案: