Question

$('.child_1').click(function(){
  $(this).toggleClass('left').siblings().toggleClass('left');
});

* {box-sizing: border-box;}
.parent {
  width: 500px;
  position: relative;
  border: 1px solid #ccc;
  overflow: hidden;
}
.child_1 {
  background-color: rgba(255,255,0,.6);
  width: 100%;
  float: left;
  height: 100px;
  z-index: 1;
  transition: all .5s;
}
.child_1.left {
  width: 30%;
}
.child_2 {
  width: 70%;
  padding-left: 15px;
  left: 100%;
  transition: all .5s;
}
.child_2.left {
  left: 30%;
}
.child_2 > div {
  background-color: rgba(0,255,255,.6);
  height: 200px;
}  

.child_2 > div > div {
  overflow: hidden;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<p>Relative</p>
<div class="parent">
  <div class="child_1"></div>
  <div class="child_2 relative">
    <div>Content of child_2<div></div></div>
  </div>
</div>
<hr />
<p>Absolute</p>
<div class="parent">
  <div class="child_1"></div>
  <div class="child_2 absolute">
    <div>Content of child_2<div></div></div>
  </div>
</div>

我遇到了这个麻烦：

当child_2移出父级时，父div必须具有隐藏溢出以隐藏child_2;
父div不能具有声明的高度，因为child_2的高度未知（在我的示例中给出了它）。

为了隐藏child_2 div，我尝试了两种方法：

第一个是相对定位的child_2，正如您所看到的，child_2的内容被推到错误的位置;
第二个绝对定位为child_2，但是绝对定位的元素不能扩展父元素的高度，所以当父div被赋予隐藏的溢出值时，child_2的内容被剪切。

Answer 1

＆＃13;

$(document).ready(function() {
   $('.child_1').click(function(){
  $(this).toggleClass('left').siblings().toggleClass('left');
});
});

＆＃13;

* {box-sizing: border-box;}
.parent {
  width: 500px;
  position: relative;
  border: 1px solid #ccc;
  overflow: hidden;
  height: 100px;
}
.child_1 {
  background-color: rgba(255,255,0,.6);
  width: 100%;
  float: left;
  height: 100px;
  z-index: 1;
  transition: all .5s;
}
.child_1.left {
  width: 30%;
}
.child_2 {
  width: 70%;
  padding-left: 15px;
  left: 100%;
  transition: all .5s;
}
.child_2.left {
  left: 30%;
}
.child_2 > div {
  background-color: rgba(0,255,255,.6);
  height: 200px;
}  

.child_2 > div > div {
  overflow: hidden;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" type="text/css" href="sample.css">
</head>

<body style="display:table">
    <p>Relative</p>
    <div class="parent">
        <div class="child_1"></div>
        <div class="child_2 relative">
            <div>1
                <div></div>
            </div>
        </div>
    </div>
    <hr />
    <p>Absolute</p>
    <div class="parent">
        <div class="child_1"></div>
        <div class="child_2 absolute">
            <div>1
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>

</html>

＆＃13;

我已经为父div添加了高度，然后溢出工作正常

如何正确隐藏此溢出内容？

1 个答案: