css - コーナーにdivを合わせる方法

Question

高さが2行にまたがるdivがあります。しかし、次の div を左下と右下の角に合わせたい:

http://jsfiddle.net/netnet/NNH6V/ 参照する前に、スプリッターを左にドラッグすると、チェックボックス 2 が表示され、「2222222222」が左下と右下に完全に収まります。

相対位置 (.VerticalUp クラス) を使用できます。しかし、問題は、その下に空の行が残ることです。これは望ましくありません。

何か案が？

Answer 1

位置でフロートを試してください。PS-私はここに新しいです。あまり経験がありません。:)

Answer 2

あなたのコードは難しいので、このようにコードに変更してください。新しいコードを作成しましたので確認してください。設計に従ってプロジェクトを実装します

CSS コード

.top, .bottom{
list-style:none;
    color:#fff;
}


.top li, .bottom li{
    display:inline-block;
    background:green;
    width:33%;
    vertical-align: top;
    border-top:solid 10px red;
}
p{
    display:inline-block;
    vertical-align: top;
}

.bottom {
position:absolute;
    left:0;
    right:0;
    bottom:0;
}

.bottom li:last-child{
float:right;
}

HTMLコード

<ul class="top">
        <li>
        <input type="checkbox">
            <p>first Check box</p>
        </li>
        <li>
        <input type="checkbox">
            <p>Second Check box</p>
        </li>
        <li>
            <p>finel box</p>
        </li>
    </ul>


<ul class="bottom">
        <li>
        <input type="checkbox">
            <p>first Check box</p>
        </li>
        <li>
            <p>finel box</p>
        </li>
    </ul>

ライブデモ http://jsfiddle.net/fAkY5/

Answer 3

Hematology div をフロートさせようとしている場合、競合を引き起こしているものが 2 つあります。変更すると.Hematology { float: right; }、これにより、出生前のコンテンツが正しくフロートされます...すべてが収まります...