CSS位置相对强制元素的高度

Question

我有两个（几乎）克隆元素（#container和#container-shadow）。应该将相同的css规则同等地应用于它们。但是，第二个.box3 div元素的高度应该是它的四倍。那是为什么？

codepen -> http://codepen.io/thiagoh/pen/aJwbOZ

CSS代码

#container {
  position: relative;
  top: -90px;
  left: 400px;
  float: left;
}

#container-shadow div,
#container div {
  width: 280px;
  box-sizing: border-box;
  position: relative;
}

.box3 {
  background-color: lightgray;
  line-height: 24px;
  padding: 4px;
  border: 1px solid black;
}

.box4 {
  background-color: darkgray;
  border: 1px solid black;
  border-top: 0px;
  padding: 0;
  left: 10px;
}

.box4 ul {
  padding: 0;
  margin: 0;
}

.box4 li {
  list-style: none;
  line-height: 24px;
  padding: 4px;
  border-bottom: 1px solid lightgray;
}

HTML代码

<div style="height: 100px;"></div>

<div id="container">
  <div class="box3">
    &nbsp;
  </div>
  <div class="box4">
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
    </ul>
  </div>
</div>

<div id="container-shadow">
  <div class="box3">
    why this element is this height?
  </div>
  <div class="box4">
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
    </ul>
  </div>
</div>

当前结果

预期结果

PS：注意方框的位置。这是我的情况所需的位置。 clear:both上的#container-shadow无法解决我的问题。

Answer 1

你不应该在#container上使用float：left，它应该是这样的：

#container {
  position: relative;
  top: -90px;
  left: 400px;
}

这是一个更新的codepen：Codepen

Answer 2

这是因为您float: left上的#container未被清除 - 在#container之后添加此内容：

<div style="clear:both"></div>

清除 float - 请参阅下面的演示：

#container {
  position: relative;
  top: -90px;
  left: 400px;
  float: left;
}

#container-shadow div,
#container div {
  width: 280px;
  box-sizing: border-box;
  position: relative;
}

.box3 {
  background-color: lightgray;
  line-height: 24px;
  padding: 4px;
  border: 1px solid black;
}

.box4 {
  background-color: darkgray;
  border: 1px solid black;
  border-top: 0px;
  padding: 0;
  left: 10px;
}

.box4 ul {
  padding: 0;
  margin: 0;
}

.box4 li {
  list-style: none;
  line-height: 24px;
  padding: 4px;
  border-bottom: 1px solid lightgray;
}

<div style="height: 100px;"></div>

<div id="container">
  <div class="box3">
    &nbsp;
  </div>
  <div class="box4">
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
    </ul>
  </div>
</div>

<div style="clear:both"></div><!-- ADDED THIS -->

<div id="container-shadow">
  <div class="box3">
    why this element is this height?
  </div>
  <div class="box4">
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
    </ul>
  </div>
</div>

修改：

如果您不希望#container-shadow下拉，可以相对定位它并浮动它到 left 使用这样的东西：

#container-shadow {
  float: left;
  left: -275px;
  position: relative;
}

见下面的演示：

#container {
  position: relative;
  top: -90px;
  left: 400px;
  float: left;
}

#container-shadow div,
#container div {
  width: 280px;
  box-sizing: border-box;
  position: relative;
}

.box3 {
  background-color: lightgray;
  line-height: 24px;
  padding: 4px;
  border: 1px solid black;
}

.box4 {
  background-color: darkgray;
  border: 1px solid black;
  border-top: 0px;
  padding: 0;
  left: 10px;
}

.box4 ul {
  padding: 0;
  margin: 0;
}

.box4 li {
  list-style: none;
  line-height: 24px;
  padding: 4px;
  border-bottom: 1px solid lightgray;
}

#container-shadow {
  float: left;
  left: -275px;
  position: relative;
}

<div style="height: 100px;"></div>

<div id="container">
  <div class="box3">
    &nbsp;
  </div>
  <div class="box4">
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
    </ul>
  </div>
</div>

<div id="container-shadow">
  <div class="box3">
    why this element is this height?
  </div>
  <div class="box4">
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
    </ul>
  </div>
</div>

我建议删除float并使用inline-block代替#container和#container-shadow（请注意我已在标记中交换了位置），然后应用定位到#container以获得所需的结果：

#container {
  position: relative;
  top: -90px;
  left: 50px;
  display: inline-block;
}
#container-shadow {
  display: inline-block;
}

#container-shadow div,
#container div {
  width: 280px;
  box-sizing: border-box;
  position: relative;
}

.box3 {
  background-color: lightgray;
  line-height: 24px;
  padding: 4px;
  border: 1px solid black;
}

.box4 {
  background-color: darkgray;
  border: 1px solid black;
  border-top: 0px;
  padding: 0;
  left: 10px;
}

.box4 ul {
  padding: 0;
  margin: 0;
}

.box4 li {
  list-style: none;
  line-height: 24px;
  padding: 4px;
  border-bottom: 1px solid lightgray;
}

<div style="height: 100px;"></div>

<div id="container-shadow">
  <div class="box3">
    why this element is this height?
  </div>
  <div class="box4">
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
    </ul>
  </div>
</div>

<div id="container">
  <div class="box3">
    &nbsp;
  </div>
  <div class="box4">
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
    </ul>
  </div>
</div>

Answer 3

position: relative;的元素相对于其正常位置定位。

设置相对定位元素的顶部，右侧，底部和左侧属性将使其远离其正常位置进行调整。 其他内容不会调整以适应元素留下的任何空白。

float: left试图强制容器阴影占据此空间，导致失真。

这是你的相同代码只是评论浮动：

#container {
      position: relative;
      top: -90px;
      left: 400px;
      /* float: left;*/
}

#container-shadow div,
#container div {
  width: 280px;
  box-sizing: border-box;
  position: relative;
}

.box3 {
  background-color: lightgray;
  line-height: 24px;
  padding: 4px;
  border: 1px solid black;
}

.box4 {
  background-color: darkgray;
  border: 1px solid black;
  border-top: 0px;
  padding: 0;
  left: 10px;
}

.box4 ul {
  padding: 0;
  margin: 0;
}

.box4 li {
  list-style: none;
  line-height: 24px;
  padding: 4px;
  border-bottom: 1px solid lightgray;
}

Answer 4

解决方案很简单。

删除它：

float: left;