只允許一個特定的孩子溢出

有三個孩子的父div。父div是300px的正方形，並將css規則設置爲overflow: hideen，因此隱藏了溢出的所有內容。我正在尋找一種解決方案，我可以讓一個特定的孩子溢出，其他人不能。

舉例來說，在我的例子中，我想允許帶有class 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

來源

2016-03-31 Kiran Dash

請執行以下操作：

給position: fixed;至.child1。
position: relative;到#parent
margin-left: 50px;到.child2

Working Fiddle

來源

2016-03-31 11:50:58 ketan

這是有效的，除非你讓窗口非常小，然後垂直滾動，那麼'.child1'將在頁面上保持靜態。也許對於OP來說不是一個問題，但需要考慮。 –

我得到的效果，但並非沒有修改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/

來源

2016-03-31 12:01:02

您可以用創建另一個元素，然後你可以使用元素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>

來源

2016-03-31 12:01:06

我不知道什麼是你想這樣做，但看到周圍用另一種方式，你可能迫使元素限制於母公司的高度，而不是使用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>

來源

2016-04-01 10:49:25 xpy

只允許一個特定的孩子溢出

回答

相關問題