Question

在提到的html中：FIDDLE

父div有三个孩子。父div是一个300px的正方形，并且css规则设置为overflow: hideen，因此隐藏了溢出的所有内容。我正在寻找一种解决方案，我可以让一个特定的孩子溢出，其他人则不能。

比方说，例如在我的例子中，我想允许带有类child1的div溢出，但任何其他类都不能。如下图所示：

那么，这可以实现吗？

HTML：

<div id="parent">
 <div class="child1">
 </div>
 <div class="child2">
 </div>
 <div class="child3">
 </div> 
</div>

的CSS：

#parent {
  overflow: hidden;
  width: 300px;
  height: 300px;
  border: 5px solid #000;
}

.child1 {
  width: 50px;
  height: 500px;
  background: red;
  float: left;
}

.child2 {
  width: 50px;
  height: 500px;
  background: blue;
  float: left;
}

.child3 {
  width: 50px;
  height: 500px;
  background: yellow;
  float: left;
}

FIDDLE

Answer 1

请执行以下操作：

将position: fixed;提交给.child1。
position: relative;至#parent
margin-left: 50px;至.child2

<强> Working Fiddle

Answer 2

我得到了效果，但是没有修改HTML。所以也许不是你要找的答案。不过，这里有：

<强> HTML：

<div id="parent">
  <div class="child1">
  </div>
  <div id="innerParent">
    <div class="child2">
    </div>
    <div class="child3">
    </div>
  </div>
</div>

<强> CSS：

#parent {
  width: 300px;
  height: 300px;
  border: 5px solid #000;
}

#innerParent {
  overflow: hidden;
  height: 300px;
  border: none;
  float: left;
}

.child1 {
  width: 50px;
  height: 500px;
  background: red;
  float: left;
}

.child2 {
  width: 50px;
  height: 500px;
  background: blue;
  float: left;
}

.child3 {
  width: 50px;
  height: 500px;
  background: yellow;
  float: left;
}

小提琴：https://jsfiddle.net/dxbp8fLL/

Answer 3

您可以使用wrap创建另一个元素position: relative，然后可以在要溢出父元素的元素上使用position: absolute

.wrap {
  position: relative;
}
#parent {
  overflow: hidden;
  width: 300px;
  height: 300px;
  border: 5px solid #000;
}
.child1 {
  width: 50px;
  height: 500px;
  background: red;
  position: absolute;
  left: 5px;
  top: 5px;
}
.child2 {
  width: 50px;
  height: 500px;
  background: blue;
  float: left;
  margin-left: 50px;
}
.child3 {
  width: 50px;
  height: 500px;
  background: yellow;
  float: left;
}

<div class="wrap">
  <div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</div>

Answer 4

我不确定你想要做什么，但反过来看，你可以强制元素限制父级的高度，而不是使用overflow:hidden

#parent {
  width: 300px;
  height: 300px;
  border: 5px solid #000;
}
.child {
  width: 50px;
  height: 500px;
  float: left;
  overflow: hidden;
  max-height: 100%;
}
.child1 {
  background: red;
  max-height: initial;
}
.child2 {
  background: blue;
}
.child3 {
  background: yellow;
}

<div id="parent">
  <div class="child child1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consequatur quod velit numquam assumenda, quibusdam sit excepturi incidunt voluptates eum, rem. Est magnam asperiores vitae ipsam esse, deserunt. Doloremque, voluptatum.
  </div>
  <div class="child child2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum sapiente maiores ipsum adipisci esse nesciunt ullam dignissimos, veniam reprehenderit. Nesciunt atque, deserunt! Ea quam doloremque sit quae in saepe dolorem.
  </div>
  <div class="child child3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ea nobis, dignissimos beatae, quia quas magni in. Hic nulla eius et autem, vero quia, iste, quisquam repellat tempora, voluptates aliquid.
  </div>
</div>

只允许特定的孩子溢出

4 个答案: