Question

为清晰起见编辑：

我有很多div。它们的宽度和高度响应浏览器窗口的大小。 padding-top: 20%：在包装器div确保它们的比例保持不变之后，无论窗口形状如何。

我希望在页面底部有一个单独的div - 它的高度仅由它包含的文本决定。我努力将它放在页面底部：它出现在第一行div下面（见下面的小提琴）。

非常感谢您的帮助！

CSS：

* {
margin: 0;
padding: 0;
}

.wrapper {
width: 100%;
display: inline-block;
position: relative;
}

.wrapper:after {
padding-top: 20%;
display: block;
content: '';
}

.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

.ratio {
display: inline-flex;
float: left;
width: 50%;
height: 100%;
}

.red {
background-color: red;
}

.yel {
background-color: yellow;
}

.foot {
position: relative;
}

HTML：

<div class="wrapper">
<div class="main">
<div class="ratio yel"></div>
<div class="ratio red"></div>
<div class="ratio red"></div>
<div class="ratio yel"></div>
<div class="ratio yel"></div>
<div class="ratio red"></div>
</div>
</div>
<div class="foot">
<p>Text for the foot of the page </p>
</div>

Answer 1

尝试让它变得更简单，记得当你使用float时不要忘记在它们之后添加明确的类

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
.wrapper, .main {
    width: 100%;
}
.ratio {
    width: 50%;
    height: 600px; /* Should be flexible according to content */
    float: left;
}
.red {
    background-color: #F00;
}
.yellow {
    background-color: #FF0;
}
.clr {
    clear: both;
}
</style>
</head>

<body>
<div class="wrapper">
  <div class="main">
    <div class="ratio red"></div>
    <div class="ratio yellow"></div>
    <div class="ratio yellow"></div>
    <div class="ratio red"></div>
    <div class="clr"></div>
  </div>
  <div class="foot">
    <p>Text for the foot of the page </p>
  </div>
</div>
</body>
</html>

将div放在具有固定比率的响应div下方

1 个答案: