让多个 DIV 高度相同

最新推荐文章于 2022-03-02 13:23:29 发布

一天一天积累

最新推荐文章于 2022-03-02 13:23:29 发布

阅读量2.3k

点赞数 1

分类专栏： jquery 文章标签： div 高度相同

本文链接：https://blog.csdn.net/u012011360/article/details/51179465

版权

jquery 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

html部分:

<div>
    <ul>
        <li class="column">
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
        </li>
        <li class="column">
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
        </li>
        <li class="column">
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
        </li>
        <li class="column">
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
        </li>
        <li class="column">
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
            <p>huhuasdauahsuahu</p>
        </li>
    </ul>
</div>

css部分:

<style type="text/css">
    .column{
        float: left;
        width: 15%;
        border: 1px solid blue;
    }
    .column p{
        height:100px;
    }
</style>

js部分:

<script type="text/javascript">
    var $columns = $('.column');
    var height = 0;
    $columns.each(function () {
        if ($(this).height() > height) {
            height = $(this).height();
        }
    });
    $columns.height(height);
</script>