溢流元件，而不在其中切割绝对定位的元件

debugcn 发表于 Dev

第035章

在container元素中，我具有浮动元素和需要从突出的绝对定位的图像container。但是，我需要container保持其高度，因为它的高度margin-bottom将其与下面的下一个块分开。

问题：container的overflow: hidden削减图像关闭，因此它不能从它突出。因此，我必须在我绝对需要的两件事之间进行选择：图像突出并container保持其高度。

如何解决这个难题？

的HTML

<div class='container'>
    <div class='col1'>
        content
    </div>
    <div class='col2'>
        <img src='whatever.jpg'/>
    </div>
</div>

的CSS

.container {
    overflow: hidden;
}
.col1,
.col2 {
    float: left;
    width: 50%;
}
.col2 {
    position: relative;
}
img {
    position: absolute;
    top: -100px;
    left: -100px;
}

保利

溢出是否包含浮子？如果是这样，还有其他几种方法。

这些可以在这里找到

现代方法是：

.container:after {
  content:"";
  display:table;
  clear:both;
}

.container {
  width: 80%;
  border: 1px solid grey;
  margin: 100px auto;
  background: pink;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}
.col1,
.col2 {
  float: left;
  width: 50%;
  height: 150px;
}
.col2 {
  position: relative;
  background: #c0ffee;
}
img {
  position: absolute;
  top: -100px;
  left: -100px;
}

<div class='container'>
  <div class='col1'>
    content
  </div>
  <div class='col2'>
    <img src='http://www.fillmurray.com/200/200' />
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。