CSS：对悬停时左列的右列进行动画处理

Question

我在这里具有此两列设置，其中，当悬停时，右列在左列上设置动画。左栏不应缩小：

http://jsfiddle.net/frank_o/xv8KV/1/

是否有一种无需使用绝对位置即可获得相同结果的方法？绝对位置为causing headache elsewhere。

HTML：

<div class="container">
    <div class="column_1"></div>
    <div class="column_2"></div>
</div>

CSS：

.container {
    position: relative;
}
.column_1 {
    position: absolute;
    width: calc(100% - 120px);
    height: 600px;
    background: blue;
}
.column_2 {
    position: absolute;
    right: 0;
    width: 120px;
    height: 100px;
    background: green;
    -webkit-transition: 500ms width;
    -moz-transition: 500ms width;
    -ms-transition: 500ms width;
    -o-transition: 500ms width;
    transition: 500ms width;
}
.column_2:hover {
    width: 100%;
}

Answer 1

您可以使用float属性来执行此操作。

.container {
  position: relative;
}

.column_2 {
  margin-right: 120px;
  height: 600px;
  background: blue;
}

.column_1 {
  width: 120px;
  height: 100px;
  background: green;
  float: right;
  -webkit-transition: 500ms width;
  -moz-transition: 500ms width;
  -ms-transition: 500ms width;
  -o-transition: 500ms width;
  transition: 500ms width;
}

.column_1:hover {
  width: 100%;
}

<h1>Hover the green column</h1>

<div class="container">
  <div class="column_1"></div>
  <div class="column_2"></div>
</div>

PS：我将样式替换为列。