Question

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

问题：container的{{1}}会将图像剪掉，因此无法从中突出。所以我必须在两件我绝对需要的东西中选择：突出的图像和overflow: hidden以保持其高度。

如何解决这个难题？

HTML

container

CSS

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

Answer 1

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

可以找到https://identityserver.github.io/Documentation/docsv2/configuration/clients.html

现代方法是：

.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>

溢出元素没有在其中切割绝对定位的元素

1 个答案: