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%;
}

<强> Working Fiddle

PS：我把造型换成了柱子。