Question

你能不知道为什么我的红色div（.testbox）没有像我希望的那样从底部放置10px，尽管margin-bottom: 10px？见http://jsfiddle.net/Hs977/ 谢谢你的帮助

body {
  background-color: rgb(255, 255, 255);
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(21, 84, 244);
  margin: 0;
  margin: 0;
    padding: 0;
    border: 0;
}

header {
  width: 100%;
  height: 600px;
  min-height: 300px;
  margin-right: auto;
  margin-left: auto;
  background-image: url('http://lorempixel.com/output/nature-q-c-1020-711-1.jpg');
  background-size: cover;
  background-position: center center;
  background-color: rgb(222, 222, 222);
}

h1 {
  width: 100%;
  margin-top: 39px;
  margin-right: auto;
  margin-left: auto;
  font-size: 37px;
  font-weight: 400;
  line-height: 1.38;
  text-align: center;
  color: rgb(0,0,0);
}


.blablatext {
  margin-top: 16px;
  margin-right: auto;
  margin-left: auto;
  font-weight: 400;
  line-height: 1.38;
  text-align: center;
  color: rgb(21, 84, 244);
}

.testbox {
float: right;
width: 200px;
height: 90px;
background: red;
margin-right: 20px;
margin-bottom: 10px;
}

Answer 1

不这样做。要将div放置在离其底部容器的指定距离处，您需要在div上使用position:absolute并在容器上设置position:relative。然后使用bottom:10px;将它放在10px的父母底部。

更新了您的小提琴：http://jsfiddle.net/Hs977/1/

Answer 2

来自Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

的

在绝对定位模型中，显式偏移框尊重其内容。它从正常流程中删除完全（它对后来的兄弟姐妹没有影响）。绝对的定位框为正常流量建立新的包含块儿童和绝对（但不是固定）的后代。但是，绝对定位元素的内容不会流动在任何其他盒子周围。它们可能会遮挡另一个盒子的内容（或者自己模糊），取决于的堆栈级别重叠的盒子。

因为您的标题已定义高度：

  height: 600px;
  min-height: 300px;

您可以指定absolute位置，然后设置底部位置

.testbox {
float: right;
width: 200px;
height: 90px;
background: yellow;
margin-right: 20px;
position:absolute;
bottom:0;

}

http://jsfiddle.net/InferOn/Hs977/8/

我不知道为什么要为 .textbox 定义float

无法从底部放置我的DIV 10px

2 个答案: