Div填充未指定的宽度[IMAGES]

Question

如果您有Vaadin或GWT或类似的经验，这个问题可能更容易理解，但是CSS和Web开发技能应该足够好。

我处于两难境地。在我们的网络应用程序的视图中，我们有三个面板，两个在顶部并排，一个在底部，应该占用与上面两个相同的宽度组合，形成三个面板的“正方形”。

这是一张解释它的图片：

问题是只有一个面板（左上角）可以具有静态指定宽度，因为那里显示的数据非常容易预测。右上角的另一个将容纳不同的内容，宽度可能会变化+ -100像素。

现在我想让底部面板调整宽度并填充与上面面板相同的宽度。

这里是Vaadin部分（Web应用程序开发的框架）。我已经尝试将上面板放在HorizontalLayout中，它与底部面板一起位于VerticalLayout内。我希望我可以将底部面板设置为setWidth("100%")，并将其宽度调整为VerticalLayout的宽度，但当然这不起作用，因为VerticalLayout没有没有指定的宽度。

然后我使用{2}的GridLayout进行测试，其中顶行有两个单元格，每个单元格中有布局，底部行有两个单元格的底部布局。 代码：

GridLayout grid = new GridLayout(2, 2);

        SHorizontalLayout h1 = new SHorizontalLayout();
        SHorizontalLayout h2 = new SHorizontalLayout();
        SHorizontalLayout h3 = new SHorizontalLayout();

        h1.addComponent(new Embedded(null, new ThemeResource("../m2m/img/lock_20x20.png")));
        h2.addComponent(new Embedded(null, new ThemeResource("../m2m/img/lock_20x20.png")));
        h3.addComponent(new Embedded(null, new ThemeResource("../m2m/img/lock_20x20.png")));

        h1.setSizeFull();
        h2.setSizeFull();
        h3.setSizeFull();

        h1.setStyleName("test-layout1");
        h2.setStyleName("test-layout2");
        h3.setStyleName("test-layout3");

        grid.addComponent(h1, 0, 0);
        grid.addComponent(h2, 1, 0);
        grid.addComponent(h3, 0, 1, 1, 1);

        outerHLayout.addComponent(grid);

这将得到这个结果：

然而，当底部单元格聚焦在FireBug工具中时，底部单元格具有两个上部的宽度：

但是Vaadin会自动生成一个div（<div style="float: left; margin-left: 0px;">），将内容的宽度限制为内容大小（即使内容设置为setSizeFull（））。

所以我真的希望通常使用CSS或者来自Vaadin的人帮助我如何指定网格，以便它不会生成限制宽度的内部单元格div来帮助我解决这个问题。内容。

如果您需要我提供更多信息，请咨询我！

我知道这是一个冗长冗长的问题所以我非常感谢你们已经阅读过这篇文章了，谢谢！

Answer 1

我不熟悉Vaadin / GWT，但在CSS和HTML方面：

<div style="overflow: auto;">
    <div style="float: left; width: 100px;"> Static width </div>
    <div style="overflow: hidden;display: inline-block;"> <div> dynamic width </div> </div>
    <div> dynamic width 2 </div>
</div>​

默认情况下<div>占用了所有空间，因此通过设置第一个内部float:left;，我们更改了它的渲染流程，因此下一个div将尝试占用所有空间（或拉伸尽可能多的空间）尽可能）。 overflow: auto或overflow: hidden会触发重新绘制/重新计算这些div，以便动态宽度正确。 display: inline-block;从div的宽度中移除错误计算，从block模式渲染时，边距接近（“在同一行上”）floated块。

示例：http://jsfiddle.net/MUN8E/3/。经过Chrome，IE9测试。 （似乎不能使用IE7，请告诉我是否需要IE7支持）

修改过的结构

<div style="overflow: auto;float: left;">
  <div>        
    <div style="float: left; width: 100px;"> static</div>
    <div style="overflow: hidden;display: inline-block;">
        dynamic width
    </div>
  </div>
  <div>
     dynamic width 2
  </div>
</div>​

其结构与 @Marthin 的答案相同。 如果容器div不是floated，则会占用所有空间。

我不确定你是否可以在Vaadin那样做，但基于 @Marthin 回答，你可以做这样的事情（使用相同的结构）：

container.setStyleName("container");
smallTopLeft.setWidth("300px"); 
smallTopLeft.setStyleName("small_left"); //
smallTopRight.setStyleName("small_right");

CSS样式：

.container {
    overflow: auto;
    float: left;
}
.container div {
    float: none;
    display: block; /* In case css produced by Vaadin has floats by default */
}
.small_left {
    float: left;
}
.small_right {
    overflow: hidden;
    display: inline-block;
}

希望它有所帮助。

Answer 2

我的建议是，你将3个视图添加到一个VerticalLayout主容器中，并将两个较小的顶部布局包装在一个horozontallayout中，然后又添加到主容器中。

Somehitng喜欢这个

    VerticalLayout container = new VerticalLayout();
    HorizontalLayout topWrapper = new HorizontalLayout();

    container.setSizeFull();
    topWrapper.setSizeFull();

    VerticalLayout smallTopLeft = new VerticalLayout();
    VerticalLayout smallTopRight = new VerticalLayout();
    VerticalLayout largeBottom = new VerticalLayout();

    smallTopLeft.setWidth("300px");
    smallTopRight.setSizeFull();
    largeBottom.setSizeFull();

    topWrapper.addComponent(smallTopLeft)
    topWrapper.addComponent(smallTopRight)

    container.addComponent(topWrapper);
    container.addComponent(largeBottom);