0 
<body style="width: 100%; text-align: center;">
    <div style="margin: 0 auto;">container
        <div style="width: 200px; margin-top: 100px; float: left;">
            left
        </div>
        <div style="width: 728px; float: left;">
            <div style="height: 100px;">
                1
            </div>
            <div style="height: 150px;">
                2
            </div>
            <div style="margin-bottom: 0; bottom: 0; height: 100%;">
                3
            </div>
        </div>
    </div>
</body>

DIV1の高さは固定で、

DIV2は jQuery を使用して高さを変更します

DIV3は可能な限り引き伸ばさなければなりません2。bottom: 0;

に欠けているスタイルは3?

私もcontainer中心になりたいです。

4

2 に答える 2

0

彼の答えを削除した人への感謝、それはほぼ機能していました。 heightどういうわけか無視されますが、使用するtopとposition: absolute;うまくいきました。DIV2のサイズが変更されると、DIV のサイズを変更するイベントがトリガーされる必要があります3。

<body style="width: 100%; text-align: center;">
    <div style="margin: 0 auto;text-align:center">container
        <div style="width: 200px; margin-top: 100px; float: left;">
            left
        </div>
        <div style="width: 728px; float: left;">
        <div style="height: 100px;" id="a">
            1
        </div>
        <div style="height: 150px;" id="b">
            2
        </div>
        <div style="background-color: red; position: absolute; bottom: 0;" id="test">
            3
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#test').css('top', $('#a').height() + $('#b').height());
    });
</script>

于 2013-07-04T09:54:43.173 に答える
0

これはJavascriptなしで行うことができますcss tables

フィドル

于 2013-07-04T09:56:29.647 に答える