Question

我有两个div框左右...我需要灵活的列表高度在右侧div框中，因为左框内容不固定...意味着如果我在'左侧div框'中添加一些内容..然后'右边div box'自动流入内容框高度应相应调整

这是link

/ CSS /

.dvleft{float:left;} .dvright{float:right}.dv100per{width:100%;float:left}
.grey_bg2{padding: 5px 0px 8px 7px;background-color:#F7F7F7;color:#000; font-size:13px}
.mTop5{margin-top:5px;}.mTop10{margin-top:10px}.mTop20{margin-top:20px}.mleft15{margin-left:15px;}
    .contactlist{background-color:#FFF;float:left;width:100%;padding: 5px 0px 10px 0px;height:239px;overflow:auto}
    .sharecon{float:left;width:100%; border-bottom:solid 1px #e6e6e6; padding:3px 0 6px 0}

/ HTML /

<div class="dvright grey_bg2 mTop20" style="width: 365px; padding: 7px 8px 10px 8px;">
    <div class="dv100per">
        <span class="dvleft">
            <strong>Right Box</strong>
        </span>
    </div>

        <div class="contactlist">
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
            <div class="sharecon">
                <span class="dvleft">
                    <input type="checkbox" name="checkbox">
                </span>

                <span class="dvleft mleft15">
                    <strong class="text11">abc123..</strong>
                </span>
                <span class="dvleft mleft15">abc123@gmail.com</span>

            </div><!--sharecon-->
        </div><!--contactlist-->

</div><!--Right Block Ends Here--->

</div>

Answer 1

你可以使用jquery equalizeCols插件

Answer 2

如果您使用的是jQuery，请尝试使用

$(function(){
    var leftDivHeight = $('.dvleft').height();
    var rightDivHeight = $('.dvright').css({height: leftDivHeight});
});

溢出div内容需要灵活的高度

2 个答案: