多个div宽度过渡与父母的100％填充

Question

我有这样的问题： 我想增加同时宽度减少他的兄弟姐妹的div宽度。一切正常，没有设置过渡属性。

如果我设置过渡并快速移动鼠标。我的div并不完全填满他们的父母。

这里是我的代码：

#parent { 
 
    display: block; 
 
    position: relative; 
 
} 
 
#parent .child { 
 
    float: left; 
 
    height: 300px; 
 
    width: 20%; 
 
    background-color: red; 
 
    transition: width .5s; 
 
} 
 
#parent .child:nth-child(2) { 
 
    background-color: grey; 
 
} 
 
#parent .child:nth-child(3) { 
 
    background-color: green; 
 
} 
 
#parent .child:nth-child(4) { 
 
    background-color: yellow; 
 
} 
 
#parent .child:nth-child(5) { 
 
    background-color: brown; 
 
} 
 
#parent:hover .child { 
 
    width: 17.25%; 
 
} 
 
#parent:hover .child:hover { 
 
    width: 31%; 
 
} 
 

<div id="parent"> 
 
    <div class="child">1</div> 
 
    <div class="child">2</div> 
 
    <div class="child">3</div> 
 
    <div class="child">4</div> 
 
    <div class="child">5</div> 
 
</div>

你有什么想法如何解决这个问题？我可以用纯CSS修复它，还是我应该使用JavaScript？

Answer 1

也许使用Flexbox会给你一个更平滑的效果。

您可以调整flex属性，因为您需要获取正确的尺寸。

body, 
 
html { 
 
    /* for demo purposes */ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#parent { 
 
    display: flex; 
 
} 
 

 
#parent .child { 
 
    height: 300px; 
 
    flex: 1 1 auto; 
 
    background-color: red; 
 
    transition: all .5s; 
 
} 
 

 
#parent .child:nth-child(2) { 
 
    background-color: grey; 
 
} 
 

 
#parent .child:nth-child(3) { 
 
    background-color: green; 
 
} 
 

 
#parent .child:nth-child(4) { 
 
    background-color: yellow; 
 
} 
 

 
#parent .child:nth-child(5) { 
 
    background-color: brown; 
 
} 
 

 
#parent .child:hover { 
 
    flex: 2 1 auto; 
 
}

<div id="parent"> 
 
    <div class="child">1</div> 
 
    <div class="child">2</div> 
 
    <div class="child">3</div> 
 
    <div class="child">4</div> 
 
    <div class="child">5</div> 
 
</div>