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的宽度

回答

相关问题