向另一个方向扩展宽度

Question

我有一些图标，当我把它们悬停时，它们会展开:

  .icon
  {
      width: 128px;
      height: 128px;
      background: url(icons.png) no-repeat;
      background-position: left top;
      -webkit-transition: width .2s;
  }
  .icon.icon1:hover
  {
      width: 270px;
      backgorund-position-x: -128px;
  }

当我悬停一个图标，它的宽度被改变，所以由于-webkit-transition将扩展图标。它的扩展方式是从左到右，这对于。icon1和。icon2来说是好的，但是对于。icon3和。icon4来说应该是相反的(从右到左)。

Answer 1

使用position:absolute，设置right:0和top:0

    .icon{
    width: 128px;
    height: 128px;
    background: url(icons.png) no-repeat red;
    background-position: left top;
    -webkit-transition: width .2s;
    position:absolute;
    top:0; right:0; 
}
.icon:hover{
    width:250px
}

Answer 2

轻松!向要调整大小的元素添加一行代码。

float: right;

这与公认的答案基本相同，但你不必把绝对定位弄得一团糟，然后有一个相对容器。

演示

Answer 3

在前一个人的回答中，他们将div定位在视图的外部，这样当宽度扩展时，您只能以一种方式看到它。也就是说，我认为你在扩大宽度的同时，也将物体移动到相同的距离，使它保持在适当的位置。此处输入图像描述