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

Question

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

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

在这里，您可以查看我使用显示表实现的功能 http://modnyblog.sk/displaytable/

由于

Answer 1

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

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

我不喜欢将display: table用于您所要求的内容，因此我使用了display: inline-block。在我的小提琴中，我也使用了vanilla javascript。这只是我的偏好 - 您可以使用jquery编写它，但我不再依赖于jquery（即使您可以通过使用更少的代码行来实现相同的结果）。

请参阅fiddle。