css - 获得更多垂直 div 和分隔页脚

Question

几个小时以来，我一直在尝试获取我在图像上发布的内容，但我无法达到...为什么这些 CSS 对用户如此不友好？

例如，如果绿色的 2 个 div 长度不同，我的页脚将张贴在最短的绿色 div 下方。

如果所有内容都可以针对 1000 像素更窄的窗口调整大小，我也想这样做。

谢谢！

所以...我发现我无法发布图片...

我尝试在这里“绘制”：

---------------------------------------------------
|                 DIV                             |
---------------------------------------------------
|                  DIV                            |
--------------------------------------------------
|                  DIV                            |
---------------------------------------------------
|            some white space                     |
-----------------------   -------------------------
|                     |  |                        |
|                     |S |                        |
|                     |P |                        |
|                     |A |                        |
|                     |C |                        |
|                     |E |                        |
|DIV (about 30% width)|  | DIV (rest of width)    |
|                     |  |                        |
|                     |  |                        |
|                     |  |                        |
|                     |  |                        |
|                     |  |                        |
|                     |  |                        |
|_____________________|  |________________________|
|               some white space                  |
|_________________________________________________|
|                   div for footer etc.           |
|_________________________________________________|

Answer 1

以下是您的 HTML 布局

<div>
  <div class="div1">
  </div>
    <div class="div1">
  </div><div class="div1">
  </div>
    <div class="left">
  </div>    <div class="right">
  </div>
    <div class="footer">
  </div>
</div>

以下是它的 CSS。

.div1
{
    width:100%;  
    border:1px solid black;
    height:50px;
    margin:5px;
}
.left
{
 width:30%;   
 border:1px solid black;
 margin:5px;
 height:50px;
 float:left;
}
.right
{
 width:60%;
 border:1px solid black;
 height:50px;
 float:right;
 margin:5px;

}
.footer
{
     width:100%;  
     border:1px solid black;
     height:50px;
    overflow: auto; 
    margin:5px;

}

改变高度。或者，如果您在 DIV 中添加内容，则无需更改高度，它们将自动获得高度。

在这里看小提琴