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. 在我的小提琴中，我还使用了香草 javascript。这只是我的偏好——您可以使用 jquery 编写它，但我正在摆脱对 jquery 的依赖（即使您可以使用更少的代码行来实现相同的结果）。

见小提琴。