html - 如何使用 3 个元素进行布局，其中 1 个元素可调整大小

Question

我想制作一个布局，其中三个元素应该彼此相邻，中间一个元素应该可以调整大小，第三个元素应该具有动态宽度。

我已经使用 css display:table 进行了布局，中间的表格可以调整大小。但我不知道它是否正确，或者是否有更好的方法来制作这种布局。

在这里你可以检查我用显示表实现了什么 http://modnyblog.sk/displaytable/

谢谢

Answer 1

您的问题请求帮助使用 javascript/jquery 修改 DOM。在您的评论中，您还提到了响应式设计，但我建议您一次掌握一件事，然后再发布另一个问题。因此，我不会回应任何考虑到您使用不同屏幕尺寸的布局的问题。

您需要 javascript 或 jquery 来通过单击调整第二列的大小。我还使用 javascript 使所有列的高度相同，但您也可以使用 flexbox 来做到这一点。设置所有列的高度是必要的，因为第一列和第二列没有内容——因此也没有高度。尽管您可以以像素为单位指定高度，但这不是一个好主意——它会限制您编写更多代码，并使响应式设计变得更加困难。

我不喜欢使用 display: table 来满足您的要求，所以我使用了 display: inline-block。在我的 fiddle 中，我还使用了 vanilla javascript。这只是我的偏好——您可以使用 jquery 编写它，但我正在摆脱对 jquery 的依赖(即使您可以通过使用它以更少的代码行获得相同的结果)。

参见 fiddle .