Question

我看过几个与此问题相关的帖子，但仍然无法使用以下内容：

.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，特别是说：

绝对位置元素相对于具有静态位置的第一个父元素定位。如果没有找到这样的元素，则包含的块是＆lt; html＆gt;

问题是容器div没有高度。我真的不想指定容器div的高度。我知道向左浮动一个图像，向右浮动另一个图像，并设置溢出：容器div上的auto会起作用，但我想我希望不必去那条路，因为我喜欢绝对定位的技术相对div。

这可能吗？

Answer 1

父容器没有自然的方法可以动态调整大小，因为孩子们不在流程中。

执行所描述内容的最佳方法是使用浮点数和清除方法：

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。

绝对将图像定位在相对定位的div内

1 个答案: