Question

我似乎无法使用最新的Chrome进行测试。

CSS：

.col {
    float: left;
    width: 30%;
    color: #fff;
}
.col.left {
    background-color: red;
}
.col.right {
    background-color: blue;
}

JS（jquery）

$(window).load(function() { //document ready will not consider images, so we keep window.load.
    function resetHeight() {
        var maxHeight = 0;
        $(".equal-height").height("auto").each(function() {
            maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
        }).height(maxHeight);
    }
    resetHeight();
    // reset height on windows's resize so that the text doesn't overflow'
    $(window).resize(function() {
        resetHeight();
    });
});

HTML：

<div class="col left equal-height">
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
    </div>
    <div class="col right equal-height">
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
    </div>

是否有更好的方法通过javascript平等身高？也许是一个着名但我不知道的剧本？

更新如果我改变了小提琴的选项，从＆＃34; onload＆＃34; 到＆＃34; ondomready＆＃34; 它似乎有效。的为什么吗

请咨询

Answer 1

CSS仅包含display flex：http://jsfiddle.net/45syw9h1/2/

<div class="container">
    <div class="col left equal-height">
        <p>lorem ipsium</p>
            <p>lorem ipsium</p>
            <p>lorem ipsium</p>
            <p>lorem ipsium</p>
            <p>lorem ipsium</p>
            <p>lorem ipsium</p>
            <p>lorem ipsium</p>

    </div>
    <div class="col right equal-height"> 
        <p>lorem ipsium</p>    
        <p>lorem ipsium</p>    
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
        <p>lorem ipsium</p>
    </div>
</div>

.container{
    display: flex;
}

.col {
    float: left;
    width: 30%;
    color: #fff;
}

.col.left {
    background-color: red;
}

.col.right {
    background-color: blue;
}

Answer 2

已经在jsfiddle中的窗口加载

如果您将Frameworks & Extensions设置为No wrap - in <body>（默认为onLoad），则可以正常运行：

http://jsfiddle.net/OxyDesign/ogu5rhaj/

通过脚本 - onload和ondocumentready来均衡div

2 个答案: