HTML5将div调整为右侧而不是左侧

Question

当我将鼠标悬停在第一张图片上时，它会展开，而其他div会减少，当你对第一张图片进行任何其他div时，它只会改变右边而不是左边的div。

到目前为止，您可以找到我的代码，看看它到目前为止是如何运作的。

<div id="slider">

<div id="allpic1">
 <img src="http://www.coolusbtoys.com/wp-content/Angry-Birds-space-Calendar-2013.jpg"/>
</div>
<div id="allpic2">
  <img src="http://i4.ytimg.com/sh/G2lfbxaIEy4/showposter.jpg?v=4fbb28d7"/>
</div>
<div id="allpic3">
  <img src="http://ec2.images-amazon.com/images/I/41hmD1hLmBL._SL500_AA300_.jpg"/>
</div>
<div id="allpic4">
  <img src="http://1.bp.blogspot.com/-55F_zXg6TKI/UKB6cCTZ1XI/AAAAAAAAB3c/um9nqYtzfY4/s1600/61bEcpAzU0L._SL500_AA300_.jpg"/>
</div>

CSS

检查以下链接

http://jsfiddle.net/dBGeV/

Answer 1

除非您找到一种完全不同的方法，否则目前无法单独使用CSS实现目标 想不出来，但我不是CSS专家。

反正
A ~ B“一般兄弟选择器”将选择B if

• B是A 和
的兄弟
• B位于A。
之后

在 A

之前无法选择位于的兄弟姐妹。

所以这适用于你的第一个div，但之后“hovering”剩下的所有div都没有被选中。

顺便说一下。如果你想占据100％的宽度，你的百分比应该调整 扩展的div占80％;所以剩下的3个div应该占20/3 = 6.66％ 我将扩展的div设置为79％，其他的设置为7％以避免浮点数。