CSS：將div向右滑出僅限於父div的寬度

我遇到一些CSS問題，希望有人可以幫忙。我基本上試圖設置一組內聯div，向右滑動，擴展到包含它們的父div的寬度。正如你可以從jsfiddle中看到的（https://jsfiddle.net/0o9bw101/），div擴展到父div的寬度，而不是隻擴展到父div的最右邊界。如果任何人都可以幫助，我會很感激。先謝謝你！CSS：將div向右滑出僅限於父div的寬度

這裏是我使用的情況下，CSS，你想在這裏看到：

.container { 
    width: 70%; 
    height: 100px; 
    background-color: black; 
} 

.greyDiv { 
    height: 60px; 
    width: 60px; 
    background-color: white; 
    border-radius: 5px; 
    color: white; 
    display: inline-block; 
    margin: 20px; 
    vertical-align: top; 
    color: black; 
} 

.greyDiv:hover { 
    transition: 2s; 
    width: 70%; 
    position: absolute 
}

來源

2017-10-04 amacdonald

你需要使用Javascript/jQuery的這個 - 不同的寬度必須根據父級內的DIV的位置來計算。或者您對每個元素使用不同的設置，那麼可以單獨使用CSS。 – Johannes

試試這個

.container { 
 
    width: 70%; 
 
    height: 100px; 
 
    background-color: black; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 

 
.greyDiv { 
 
    height: 60px; 
 
    width: 60px; 
 
    background-color: white; 
 
    border-radius: 5px; 
 
    color: white; 
 
    display: inline-block; 
 
    margin: 20px; 
 
    vertical-align: top; 
 
} 
 

 
.greyDiv:hover { 
 
    transition: 2s; 
 
    width: 100%; 
 
    position: absolute; 
 
}

<div class='container'> 
 
    <div class='greyDiv'></div> 
 
    <div class='greyDiv'></div> 
 
    <div class='greyDiv'></div> 
 
    <div class='greyDiv'></div> 
 
</div>

來源

2017-10-04 19:03:34 fbuchlak

種類。我試圖讓它可以滑出正確的填充量，而不是將它滑出來並隱藏任何溢出（這意味着如果將鼠標懸停在右側的最後一個div上，它不應該做任何事情）。另外，在發佈的代碼中，當我由於某種原因懸停在其他任何其他div上時，最後一個div會消失。 – amacdonald

編輯：

訣竅是在主容器內添加另一個框。

DEMO：https://jsfiddle.net/0o9bw101/3/

<div class='container'> 
    <div class='invisible_container'> 
    <div class='greyDiv'></div> 
    <div class='greyDiv'></div> 
    <div class='greyDiv'></div> 
    <div class='greyDiv'></div> 
    </div> 
</div>

以前的答案：

這是很難做到的，當你在混合％母公司與在PX孩子的利潤。也有父母的位置設置爲默認以外的東西會有所幫助。

這裏是爲你工作例如：

.container { 
    width: 70%; 
    height: 100px; 
    background-color: black; 
    position: absolute; 
} 

.greyDiv { 
    height: 60px; 
    width: 60px; 
    background-color: white; 
    border-radius: 5px; 
    color: white; 
    display: inline-block; 
    margin: 20px; 
    margin-left: 2%; 
    vertical-align: top; 
} 

.greyDiv:hover { 
    transition: 2s; 
    width: 96%; 
    position: absolute 
}

DEMO：https://jsfiddle.net/0o9bw101/2/

來源

2017-10-04 19:23:51

啊，我的解決方案只適用於第一廣場，得解決這個問題:) –

與另一個完成了我的答案，這次完全工作，解決方案 –

這可能不是很什麼，你所追求的，但這裏的元素將增長到容器的整個寬度（左不管它的起始位置是多少，每個對象使用2個額外的元素。

的.inner用於後臺成長爲全寬

的.placeholder用於倒塌左保持其他元素

@keyframes grow { 
 
    from {width: 0%;} 
 
    to {width: 92%;} 
 
} 
 

 
.container { 
 
    width: 70%; 
 
    height: 100px; 
 
    position: relative; 
 
    background-color: black; 
 
} 
 

 
.greyDiv { 
 
    height: 60px; 
 
    width: 60px; 
 
    background-color: white; 
 
    border-radius: 5px; 
 
    color: black; 
 
    display: inline-block; 
 
    margin: 20px 4%; 
 
    vertical-align: top; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.inner { 
 
    width: 0%; 
 
    height: 100%; 
 
    display: none; 
 
    background-color: transparent; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 1; 
 
} 
 

 
.placeholder { 
 
    display: none; 
 
    background-color: transparent; 
 
    height: 60px; 
 
    width: 60px; 
 
    margin: 20px 4%; 
 
} 
 

 
.greyDiv:hover { 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    margin: 20px 0; 
 
    background-color: transparent; 
 
    z-index: 4; 
 
} 
 

 
.greyDiv:hover + .placeholder { 
 
    display: inline-block; 
 
} 
 

 
.greyDiv:hover .inner { 
 
    display: inline-block; 
 
    left: 4%; 
 
    width: 100%; 
 
    background-color: white; 
 
    animation-name: grow; 
 
    animation-duration: 2s; 
 
    animation-fill-mode: forwards; 
 
    z-index: 5; 
 
}

<div class='container'> 
 
    <div class='greyDiv'>1a<div class="inner">1x</div></div><div class="placeholder"></div> 
 
    <div class='greyDiv'>2a<div class="inner">2x</div></div><div class="placeholder"></div> 
 
    <div class='greyDiv'>3a<div class="inner">3x</div></div><div class="placeholder"></div> 
 
    <div class='greyDiv'>4a<div class="inner">4x</div></div><div class="placeholder"></div> 
 
</div>

來源

2017-10-04 20:11:43 Ben

CSS：將div向右滑出僅限於父div的寬度

回答

相關問題