CSS：親divの幅にのみ右にdivを移動

Question

私はいくつかのCSSの問題を抱えています。私はここの誰かが助けてくれることを願っています。私は基本的に、右にスライドするインラインdivのグループを設定し、それらを含む親divの幅に拡大しようとしています。私が（https://jsfiddle.net/0o9bw101/）を持っているjsfiddleから分かるように、divは親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 
} 

Answer 1

この

.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>

Answer 2

EDITをお試しくださいメインコンテナの内側に別のボックスを追加することです。

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/

Answer 3

これはあなたがのために行っていたかなり何ではないかもしれませんが、ここでの要素は、コンテナ（左の全幅に成長します右に）オブジェクトに2つの余分な要素を使用して開始位置に関係なく。

.innerは

.placeholderは、あなたがのためのJavaScript/jQueryのを必要とする

@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>