css - 如何包装和设置 CSS 属性以实现描述的结果？

Question

我正在开发一个 Web 应用程序，该应用程序在一个 View 中具有三个面板，如图所示:

在动态上下文中，您会使用哪些 CSS 属性让底部面板的宽度与上面两个面板的宽度相同？

编辑: 很抱歉我应该提到我不能使用任何 javascript。我需要一个完全由 CSS 执行的解决方案。标记是从我正在开发应用程序的 Java 代码生成的，因此我也无法直接访问它。

Answer 1

了解 display:inline-block;、float、position 和其他用于显示和定位选项的属性。我只是猜想有类似包装器的东西。

HTML:

<div id="wrapper">
    <div id="firstPanel">First panel <br/>width: 300px</div>
    <div id="secondPanel">
         Second panel <br/> width: > 300px, thus min-width:300px;
    </div>
    <div id="thirdPanel">
         Third panel. <br/> width: First panel + second panel + margin(?)
    </div>
</div>

CSS:

#wrapper{
    display:inline-block;
    /* a block element will take all width, so you have to use a specific width,
    a floating or an inline element.*/
}
#wrapper > div{ /* just for convenience */
    border:1px solid #000; 
    border-radius:3px;
    margin:.2em;
}
#firstPanel, #secondPanel{
    /* to show both in the same row. float:left is also possible */
    display:inline-block;
}
#firstPanel{width:300px;}
#secondPanel{min-width:300px;}

/* if you use float:left above, you have to use */
#thirdPanel{clear:both;}

Demo