Question

我想创建一个看起来像这样的3块布局：

_________
|   |   |
|   |___|
|   |   |
---------

宽度以％为基础。填充底部也是如此，以使箱子响应高度和宽度。

css看起来像这样：

#block-home header {
    position: relative;
    padding-bottom: 60%;
    width: 60%;
    float: left;
    background-color: green;
}
#block-home footer {
    position: relative;
    padding-bottom: 32%;
    width: 40%;
    float: right;
    background-color: red;
}
#block-home aside {
    position: relative;
    padding-bottom: 23%;
    width: 40%;
    float: right;
    clear: right;
    background-color: blue;
}

我的问题是1和3块的底部边框从不对齐。通过更改浏览器的宽度，它们会错位。

这里有什么可能的解决方案？

jsfiddle

Answer 1

您面临的问题是padding-bottom是根据元素的宽度计算的。您需要使用height属性。

请参阅here：

百分比是指包含块的宽度

要实现您的布局，您可以在右侧块或左侧使用position:absolute;，以便它们/它适应另一个块的高度。

以下是 FIDDLE ，其中2个右侧块设置为position: absolute;

CSS代码：

#block-home{
    position:relative;
}

#block-home header {
    position: relative;
    padding-bottom: 60%;
    width: 60%;
    background-color: green;
}
#block-home footer {
    position: absolute;
    top:0;
    left:60%;
    height:70%;
    width: 40%;
    background-color: red;
}
#block-home aside {
    position: absolute;
    top:70%;
    left:60%;
    height:30%;
    width: 40%;
    background-color: blue;
}

制作堆叠的响应块，在调整大小时更改高度和宽度

1 个答案: