0

div コンテナーの右下にチェックボックスを配置しようとしています。ホバーするとコンテナの高さが大きくなり、divが大きくなっても右下に残るようにチェックボックスを固定したい。

チェックボックスを右下に配置するのに苦労しています。

ここに私のコードとFiddleがあります。

<div class="objectWrap">
    <div class="calendarObject">
        <label class="objectTitle" for="chkOb2">Tasks</span>
        <input type="checkbox" id="chkOb2" />
    </div>
</div>

.objectWrap {
    position:relative;
    float:left;
    height:75px;
    margin-bottom:15px;
}
    .objectWrap:not(:last-child) {
        margin-right:15px;
    }
    .objectWrap:hover {
        cursor:pointer;
    }

.calendarObject {
    position:relative;
    width:72px;
    height:75%;
    background-color:#f5f5f5;
    border-radius:5px;

    transition: height 400ms;
    -webkit-transition: height 400ms;
}
    .calendarObject label.objectTitle {
        position:absolute;
        top:3px;
        left:3px;

        font-size:13px;
        color: #8998a4;
    }
    .calendarObject input[type="checkbox"] {
        position:absolute;
        bottom:0px;
        right:0px;
    }
    .calendarObject:hover {
        height:100%;
        transition: height 400ms;
        -webkit-transition: height 400ms;
    }
4

2 に答える 2

3

コードにバグがあります。</span>である必要があります</label>。

修正されたHTML：

<div class="objectWrap">
    <div class="calendarObject">
        <label class="objectTitle" for="chkOb2">Tasks</label>
        <input type="checkbox" id="chkOb2" />
    </div>
</div>​

JSフィドルを修正

于 2012-12-07T19:43:26.560 に答える
1

マークアップが適切にネストされていません。ラベルタグには終了ラベルタグが必要です。終了スパンタグではありません。

于 2012-12-07T19:43:34.997 に答える