让 Div 填充未指定的宽度 [图片]

Question

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

我陷入了两难的境地。在我们的 Web 应用程序的视图中，我们有三个面板，两个并排在顶部，一个在底部，它们所占的宽度应与上面两个面板的宽度总和形成一个由三个面板组成的“正方形”一样多。

这里有一张图片来解释它：

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

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

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

然后我使用 2 x 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 (

) 将内容的宽度限制为内容大小（即使内容设置为 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>​

默认情况下

占据所有空间，因此通过设置第一个内部 float:left; 我们改变它的渲染流程，因此下一个 div 将尝试占据所有剩余空间（或尽可能拉伸）。 overflow: auto 或 overflow: hide 触发这些 div 的重绘/重新计算，以便动态宽度是正确的。 display: inline-block; 消除了以 block 模式渲染时 div 宽度的错误计算，且边距接近（“与以下行相同”）浮动块。

示例：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 不是浮动，它将占据所有空间。

我不确定你是否可以在 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 中，而horozontallayout 又会添加到主容器中。

像这样的东西

    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);