如何使用 3 个元素进行布局，其中 1 个元素可调整大小
How to make layout with 3 elements where 1 is resizable
我想制作一个布局，其中三个元素应该是彼此相邻的，中间一个应该是可调整大小的，第三个应该是动态宽度的。
我已经用 css display:table 制作了布局，其中中间一个可以调整大小。但是我不知道它是否正确，或者是否有更好的方法来制作这个布局。
在这里你可以查看我用显示实现的效果table
http://modnyblog.sk/displaytable/
谢谢
您的问题请求帮助将 DOM 修改为 javascript/jquery。在您的评论中，您还提到了响应式设计，但我建议您一次掌握一件事，然后 post 另一个问题。因此，我不会回应任何考虑到不同屏幕尺寸的布局。
您需要 javascript 或 jquery 通过单击调整第二列的大小。我还使用 javascript 使所有列的高度相同，但您也可以使用 flexbox 来实现。设置所有列的高度是必要的，因为第一列和第二列没有内容——因此也没有高度。尽管您可以以像素为单位指定高度，但这不是一个好主意 – 它会限制您编写更多代码并使响应式设计变得更加困难。
我不喜欢使用 display: table 来满足您的要求，所以我使用了 display: inline-block。在我的 fiddle 中，我还使用了香草 javascript。这只是我的偏好——您可以使用 jquery 来编写它，但我正在摆脱对 jquery 的依赖（尽管您可以通过使用它以更少的代码行获得相同的结果）。
参见fiddle。
我想制作一个布局，其中三个元素应该是彼此相邻的，中间一个应该是可调整大小的，第三个应该是动态宽度的。
我已经用 css display:table 制作了布局，其中中间一个可以调整大小。但是我不知道它是否正确，或者是否有更好的方法来制作这个布局。
在这里你可以查看我用显示实现的效果table http://modnyblog.sk/displaytable/
谢谢
您的问题请求帮助将 DOM 修改为 javascript/jquery。在您的评论中，您还提到了响应式设计，但我建议您一次掌握一件事，然后 post 另一个问题。因此，我不会回应任何考虑到不同屏幕尺寸的布局。
您需要 javascript 或 jquery 通过单击调整第二列的大小。我还使用 javascript 使所有列的高度相同，但您也可以使用 flexbox 来实现。设置所有列的高度是必要的，因为第一列和第二列没有内容——因此也没有高度。尽管您可以以像素为单位指定高度，但这不是一个好主意 – 它会限制您编写更多代码并使响应式设计变得更加困难。
我不喜欢使用 display: table 来满足您的要求，所以我使用了 display: inline-block。在我的 fiddle 中，我还使用了香草 javascript。这只是我的偏好——您可以使用 jquery 来编写它，但我正在摆脱对 jquery 的依赖（尽管您可以通过使用它以更少的代码行获得相同的结果）。
参见fiddle。