我需要剪輯或隱藏內容溢出它的父，但只在一邊

我有一個DIV單個孩子DIV可能會或可能不會在其父母的多邊溢出。我需要能夠隱藏孩子的任何部分溢出父母的底部邊緣，但允許所有其他方面溢出。我需要剪輯或隱藏內容溢出它的父，但只在一邊

這裏有一個圖表，以幫助解釋：

enter image description here

我一直在尋找的clip CSS屬性，但一直無法將其擊敗就範，很大程度上是因爲它不接受百分比而這個孩子沒有靜態的高度/寬度。另外，當父母懸停在父母身上時，孩子會動起來，從一個位置移動到另一個位置。使事情有點棘手。

對此提出建議？

備註我的目標是不爲樣式目的添加多餘的標記。這個特定的網站在語義層面上必須牢固，因爲它對於一所大型學校來說是如此，因此添加額外的封裝器來實現這一點並不理想。

來源

2012-10-13 Brandon Durham

你開到使用JavaScript的可能性？ – coopersita

最好不要使用Javascript。 –

如果您可以使用一個更多的父div，我可以使用以下實現類似的結果。

的CSS：

#grandparent{ 
     overflow: hidden 
    } 
    #parent { 
     background-color: #600; 
     width: 200px; 
     height: 200px; 
     padding-top: 30px; 
     text-align: center; 
     margin: 0 auto; 
     position: relative 
    } 
    #child { 
     background-color: #090; 
     width: 100%; 
     height: 300px; 
     margin: 0 auto; 
     position: absolute; 
     padding: 0 1.5em; 
     margin-left: -1.5em; 
    }

的標記：

<div id="grandparent"> 
     <div id="parent"> 
     <div id="child">Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum</div> 
     </div> 
    </div>

來源

2012-10-14 03:56:02 traditional

謝謝你的建議。我的目標是不爲樣式目的添加無關的標記。這個特定的網站必須在語義層面上紮實，因爲它適合大型學校。我會在原始文章中添加一條關於該文件的註釋。再次感謝！ –

我需要剪輯或隱藏內容溢出它的父，但只在一邊

回答

相關問題