html - 在相对定位的div内绝对定位图像

我看过几篇与此问题相关的文章，但仍然无法完成以下工作:

.container {
  position: relative;
  width: 100%;
}

.left {
  position: absolute;
  left: 0px;
}

.right {
  position: absolute;
  right: 0px;
}

<html>

<body>
  <div class="container">
    <img src="..." class="left" />
    <img src="..." class="right" />
  </div>
</body>

</html>

根据http://www.w3schools.com/css/css_positioning.asp，特别是这样写的行:

问题是容器div没有高度。我真的很想不必指定容器div的高度。我知道向左 float 一个图像，向右 float 另一个图像，并设置溢出:容器div上的auto可以工作，但是我想我希望不必走那条路线，因为我喜欢在a内绝对定位的技术。相对分度

这可能吗？

最佳答案

父容器没有自然的方式来动态调整大小以适合您绝对定位的子容器，因为子容器不在流中。

进行描述的最好方法是使用浮点数和清除方法:

body {
  padding: 20px;
}

.container {
  position: relative;
  width: 100%;
  background: yellow;
}

.left {
  float: left;
  background: red;
  width: 100px;
  height: 200px;
}

.right {
  float: right;
  background: blue;
  width: 100px;
  height: 200px;
}


/* Use the clearfix technique: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-
    overflowhidden-demystified/ */

.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}


/* IE < 8 */

<body>
  <div class="container clearfix">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
</body>

如果您坚持要进行绝对定位，并且需要父容器与子容器的高度匹配，则必须使用javascript。