html - 如何在 CSS 中使这些比例正确(带有水平和垂直附件的 block )

Question

我觉得自己是一个称职的程序员，但我不擅长 CSS。我阅读了有关 float 和 clear 以及 display: inline-block 的内容，可以理解这些 Material ，但我仍然无法将其应用到我自己的设计中。我认为我的无能会使我感到沮丧，这往往会很快适得其反。话虽如此，没有什么可以阻止您尝试 (!) 所以...

我的布局本质上是:

 _____________  
|         | v |
|         | e |
| big_div | r |
|         | t |
|_________|___|
|   lower     |
|_____________|

我希望标记为 vert 的 div 和标记为 lower 的 div 能够“粘附”到大 div。冬天像猫和老鼠一样依偎在一起。如果尺寸是固定的，则以下实现:

<div id="big_div" style="float:left"></div>

<div id="vert" style="float:left"></div>

<div id="lower" style="clear: left"></div>

这正好显示了我想要的，但正如我所说，只有在我修复尺寸的情况下。 如何使它们随着 big_div 的增长而扩展(因为它的内容是任意大小的？我希望它们随 big_div 的大小缩放。

Answer 1

在 big_div 和 vert 周围使用一个容器，并将 Faux Columns 应用于它。然后 lower 应该在容器内部或外部处理自己。如果您需要示例，请告诉我。

添加示例:http://imaginekitty.com/cssExamples/cats/cats.html