css - 向其他方向扩展宽度答案

【问题标题】：css - expand width in other directioncss - 向其他方向扩展宽度
【发布时间】：2013-03-19 08:06:08
【问题描述】：

我有一些图标在我悬停时会展开：

  .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 应该是相反的方式（从右到左）。

【问题讨论】：

这取决于浮动或定位。也许您可以将其设置为float: right，或者使用position: absolute; right: 0。或者你可以减少margin-left，同时增加width。没有例子很难说。
Sowmya 的答案也适用于 fredrivett 的情况，父元素只需要为 position:absolute; 设置 position:relative; 即可。由于我的代表太低，无法评论答案

标签： html css

【解决方案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
}

DEMO

【讨论】：

这是我所知道的最好的选择，如果您可以将项目从页面流中取出，但如果您想将项目保留在流中，则此解决方案不起作用。我不知道有任何解决方案，但是否存在？
有没有绝对位置的解决方案？

【解决方案2】：

简单！向要调整大小的元素添加一行代码。

float: right;

这与接受的答案基本相同，但您不必乱用绝对定位，然后有一个相对容器。

DEMO

【讨论】：