相對隱藏位置和隱藏位置

我正試圖在JQuery中做一些簡單的div切換器，但我在一些CSS問題上遇到困難。相對隱藏位置和隱藏位置

基本上我有一個固定寬度爲650px的容器，在這個容器裏有n個div，它們的寬度都是可變的。

由於我正在做左/右效果，我有容器溢出：隱藏，以便我可以隱藏div的內容，因爲它們位於屏幕的左側。

我的問題是，只要容器設置爲溢出：屏幕上不顯示任何內容。

這裏是我的代碼

<div class="container"> 
    <div class="somechild">variable height</div> 
    <div class="somechild">variable height</div> 
</div>

而CSS

.container{ 
    position: relative; 
    width: 650px; 
    overflow: hidden; 
} 

.somechild{ 
    position: absolute; 
    display: none; 
}

感謝

來源

2011-04-26 Paté

你到底想要看到什麼？你的孩子divs顯示：none; – Mikaveli 2011-04-26 14:47:40

他們變得可見一些JS。一次只能有一個孩子可見 – 2011-04-26 14:49:01

然後明確地設置容器的div高度，否則你將有一個0高度的div - 你將無法看到任何東西... – Mikaveli 2011-04-26 14:53:24

試試這個：

.container{ 
    position: relative; 
    width: 650px; 
    height: 30px; 
    overflow: hidden; 
}

擁有的子元素顯示無指親div並不包含任何東西，所以它的高度爲0。將子元素設置爲可見不會自動更改高度，因此您需要將其設置在您的CSS中，或者在將子設置爲可見時以編程方式進行設置。

來源

2011-04-26 14:56:23 Mikaveli

我注意到，您不必指定固定的寬度/高度即可使overflow: hidden;正常工作。所有你需要做的是使用display: block;或display: inline-block;，它會工作。

這裏是用幻燈片的動畫我爲我自己的項目按鈕示例代碼：http://codepen.io/anon/pen/WbgJgm

HTML：

<a href="#"><span>Hello</span></a>

LESS：

a { 
    text-decoration: none; 
    color: blue; 

    span { 
    display: inline-block; 
    overflow: hidden; 
    position: relative; 
     z-index: 1; 
     padding: 10px 15px; 
    border: 1px solid blue; 

    &:after { 
     content: ""; 
     position: absolute; 
     top: 0; left: -100%; 
     z-index: -1; 
     width: 100%; height: 100%; 
     background: blue; 
     -webkit-transition: left 0.1s ease; 
     -moz-transition: left 0.1s ease; 
     transition: left 0.1s ease; 
    } 
    } 
    &:hover { 
    span { 
     &:after { 
     left: 0; 
     } 
    } 
    } 
}

來源

2015-03-09 09:42:00 adamj

相對隱藏位置和隱藏位置

回答

相關問題