css - CSS3 过渡改变另一个元素的边距

Question

我有这个 HTML 文档：

<div id="c">
    <div class="base">
        <div class="cb" id="red" data-color="Red">
        </div>
    </div>
    <div class="base">
        <div class="cb" id="green" data-color="Green">
        </div>
    </div>
    <div class="base">
        <div class="cb" id="blue" data-color="Blue">
        </div>
    </div>
</div>

这是我的CSS：

<style type="text/css">
.cb {
    display: inline-block;
    background-color: #56a100;
    width: 70%;
    height: 70%;
    margin-top: 15%;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.cb:hover {
    display: inline-block;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    width: 100%;
    height: 100%;
    margin-top: auto;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.base {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-left: 5px;
    margin-top: 20px;
    border-style: ridge;
    text-align: center;
    vertical-align: central;
}
</style>

​ 但是当我将鼠标放在其中一个.cb元素上时，其他元素就会下降！你可以在这里看到演示。有人如何阻止其他元素下降吗？

Answer 1

display: inline-block;从.base类中删除并使其浮动到左侧float: left;。这是固定的演示http://jsfiddle.net/pTCFL/2/