1

私はこの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>

しかし、要素の1つにマウスを置くと.cb、他の要素が下がります！ここでデモを見ることができます。他の要素が下がるのを止める方法はありますか？

4

1 に答える 1

3

.basedisplay: inline-block;クラスから削除し、左にフロートさせます。これが修正されたデモですhttp://jsfiddle.net/pTCFL/2/float: left;

于 2012-07-22T10:55:10.680 に答える