2

正如标题所说：

.cnr{
  display: flex;
  height: 100%;
  background-color: grey;
  position: absolute;
  border: 1px red solid;
}
.cnr > div{
  box-sizing: border-box;
  padding: 1em;
  border: 1em solid;
  overflow: hidden;
}
.cnr > .closed{
  width: 0;
  flex-basis: 0;
  flex-shrink: 1;
  flex-grow:   0;
  min-width:   0;
  min-height:  0;
}
<div class="cnr">
  <div>
    open
  </div><div class="closed">
    closed
  </div>
</div>

width: 0由于填充和边框，无法关闭第二个 div 。

做什么？

我不知道我可以添加什么更多细节。这是一个设置为display: flex. 每个弹性项目都有一个边框和填充以及一些（文本）内容。总共有2个。然后其中一些将使用 width: 0 关闭，并关闭边框和填充。box-sizing: border-box用来。

但它不起作用。谢谢你。

编辑：好的，抱歉没有解释清楚，但是宽度需要动画，这就是为什么动画播放时需要有填充，如果可能的话我也不想动画填充。

4

1 回答 1

1

你可以使用:not：

.cnr>div{
  box-sizing: border-box;
  overflow: hidden;
}

.cnr>div:not(.closed) {
  border: 1em solid;
  padding: 1em;
}


$('.cnr').on('click', function(){
  $(this).find('div').toggleClass('closed');
})
.cnr {
  display: flex;
  height: 100%;
  background-color: grey;
  position: absolute;
  border: 1px red solid;
}

.cnr>div{
  box-sizing: border-box;
  overflow: hidden;
}

.cnr>div:not(.closed) {
  border: 1em solid;
  padding: 1em;
}

.cnr>.closed {
  width: 0;
  flex-basis: 0;
  flex-shrink: 1;
  flex-grow: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cnr">
  <div>
    open
  </div>
  <div class="closed">
    closed
  </div>
</div>

于 2017-05-24T23:36:38.347 回答