GridBagLayout和面板出现问题

Question

所以我要做的就是创建：

我正在使用网格布局，这是我到目前为止所拥有的：

$(document).on('click', '#search-result', function(){
    $(this).find("#myDiv").fadeIn();
});

$(document).on('click', '#close', function(){
    $(this).find("#myDiv").fadeOut(); 
});

它会创建类似：

的内容

如何将面板向上推，使它们像我的第一张照片一样相互接触。我查看了GridBagConstraints但我找不到任何看起来会起作用的东西。谢谢！

Answer 1

使用一个布局管理器而不是尝试解决完整的布局问题，嵌套布局通常更简单。例如，您的示例代码可以修改为使用水平网格布局（以保持列宽度相等 - 我实际上不知道您是否要强制它。如果不是，那么FlowLayout或{{1}会更好），列各使用BoxLayout：

BoxLayout

结果：

（我稍微修改了一些首选大小以使图像更小。另外请注意，override getPreferredSize() rather than use setPreferredSize()通常更好;但是setPreferredSize（）对于快速示例很方便。