Vaadin 7-CSSLayout中的部件对齐

我有一个垂直布局，包含上部和下部。 上部是一个CssLayout。CssLayout本身包含两个部分，都是水平布局，我们称之为firstHL和secondHL。 我的问题是secondHL的内容与firstHL的内容不一致。在firstHL中，还有更多的水平布局和选项组。在secondHL中还有进一步的水平布局和列表选择。不管是什么原因 secondHL的内容顶部比firstHL的内容顶部低几个像素

如果我使用CssLayout，情况就是这样。如果我使用水平布局而不是CSSlayout，此对齐问题将消失。但我相信我需要CssLayout进行动态尺寸调整，即在大屏幕上，第一个HL和第二个HL彼此相邻，在小屏幕上，它们彼此下方

因此，我看到了两个可能的方向： 1、了解如何对齐CssLayout的内容 或 2、将CssLayout替换为能够动态调整尺寸并保持正确对齐的部件

任何建议都将不胜感激。 以下是我迄今为止所做的工作：

protected void init(VaadinRequest request) {
    VerticalLayout vertic = new VerticalLayout();

    CssLayout upper = new CssLayout();
    //HorizontalLayout upper = new HorizontalLayout();

    Component firstHL = firstHL();
    upper.addComponent(firstHL);

    Component secondHL = secondHL();
    upper.addComponent(secondHL);

    // IT is not possible FOR CssLAyouts!!!
    //upper.setComponentAlignment(first, Alignment.TOP_LEFT);
    //upper.setComponentAlignment(sec, Alignment.TOP_RIGHT);

    vertic.addComponent(upper);
    vertic.setSizeFull();
    vertic.setExpandRatio(upper, 0);
    setContent(vertic);
}

private HorizontalLayout firstHL() {
    HorizontalLayout hl = new HorizontalLayout();
    hl.addComponent(firstA());
    hl.addComponent(firstB());
    return hl;
}

private Component firstA() {
    //Panel panel = new Panel("FirstA");
    HorizontalLayout hl = new HorizontalLayout();
    hl.setCaption("FIRST A");
    OptionGroup period = new OptionGroup("Period");
    period.addItem("DAY");
    period.addItem("WEEK");
    period.addItem("MONTH");
    period.addItem("YEAR");

    hl.addComponent(period);

    OptionGroup hierarchyLevel = new OptionGroup("Level");
    hierarchyLevel.addItem("A");
    hierarchyLevel.addItem("B");
    hierarchyLevel.addItem("C");
    hierarchyLevel.addItem("D");
    hierarchyLevel.addItem("F");
    hierarchyLevel.addItem("G");

    hl.addComponent(hierarchyLevel);

    hl.setMargin(true);
    hl.setSpacing(true);
    //panel.setContent(hl);

    return hl;
}

private Component firstB() {
    //Panel panel = new Panel("FirstB");
    HorizontalLayout hl = new HorizontalLayout();
    hl.setCaption("FIRST B");
    OptionGroup period = new OptionGroup("Period");
    period.addItem("DAY");
    period.addItem("WEEK");

    hl.addComponent(period);

    OptionGroup hierarchyLevel = new OptionGroup("Level");
    hierarchyLevel.addItem("A");
    hierarchyLevel.addItem("B");

    hl.addComponent(hierarchyLevel);

    hl.setMargin(true);
    hl.setSpacing(true);
    //panel.setContent(hl);

    return hl;
}

private HorizontalLayout secondHL() {

    HorizontalLayout hl = new HorizontalLayout();


    Component c = secondA();
    hl.addComponent(c);     

    Component cc = secondB();
    hl.addComponent(cc);

    return hl;
}



private Component secondA() {
    //Panel panel = new Panel("SECOND A");
    HorizontalLayout hl = new HorizontalLayout();
    hl.setCaption("SECOND A");
    ListSelect select = new ListSelect("Path");

    select.addItem("A");
    select.addItem("B");
    select.addItem("C");
    select.addItem("D");
    select.addItem("E");

    select.setMultiSelect(true);
    select.setNullSelectionAllowed(true);
    select.setRows(5);

    hl.addComponent(select);
    hl.setMargin(true);
    hl.setSpacing(true);
    //panel.setContent(hl);

    return hl;
}


private Component secondB() {
    //Panel panel = new Panel("SECOND B");
    HorizontalLayout hl = new HorizontalLayout();
    hl.setCaption("SECOND B");
    hl.addComponent(new DateField("Start date"));
    hl.addComponent(new DateField("End date"));
    hl.setMargin(true);
    hl.setSpacing(true);
    //panel.setContent(hl);

    return hl;
}

---

可以将样式名称添加到secondHL布局：

secondHL.addStyleName("secondHL");

并将其放入您的styles.css中：

.secondHL {vertical-align: top}

---

我建议您尽量减少在应用程序中使用布局，因为它们会显著降低性能，尤其是当它们嵌套在彼此内部时。我发现这篇文章对此类场景非常有用