Question

就像问题所说的那样，我无法将任何东西浮到底部......我尝试浮动：绝对并且它表明了这一点。应该是5个不同的盒子，但它只显示其中一个。这是我的代码：

＆＃13;

html,
body {
  height: 100%;
}
#one,#two,#three,#four,#five {
  margin:0;
  padding:0;
  float:left;
  display:inline-block;
  height:50%;
  width:20%;
  bottom:0;
  right:0;
  left:0;
  position:absolute;
}
div {
    margin:-2px;
    padding:-2px;
}
#container {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
}
#one {
  background-color: blue;
}
#two {
  background-color: green;
}
#three {
  background-color: yellow;
}
#four {
  background-color: orange;
}
#five {
  background-color: red;
}

＆＃13;

<div id="one">

</div>

<div id="two">

</div>

<div id="three">

</div>

<div id="four">
</div>

<div id="five">

＆＃13;

提前致谢：）

Answer 1

您的代码无法正常工作，因为您通过绝对定位，0边距和所有5个框的左边设置为0，基本上将所有5个框叠加在一起，所以一切都需要同样定位在屏幕的左下角。如果你删除右边：0并为每个框添加一个单独的左边属性，你应该能够在底部整齐排列所有5个框，如下所示：

html,
body {
  height: 100%;
}
#one,#two,#three,#four,#five {
  margin:0;
  padding:0;
  float:left;
  display:inline-block;
  height:50%;
  width:20%;
  bottom:0;
  left:0;
  position:absolute;
}
#container {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
}
#one {
  background-color: blue;
  left:0;
}
#two {
  background-color: green;
  left:20%;
}
#three {
  background-color: yellow;
  left:40%;
}
#four {
  background-color: orange;
  left:60%;
}
#five {
  background-color: red;
  left:80%;
}

jsfiddle：https://jsfiddle.net/hq2hv1pw/

另外在旁注中，我将选择器与具有5个ID哈哈的CSS样式的类组合在一起。希望这可以帮助你

如何将div浮动到页面底部？

1 个答案: