Question

我的布局如下：

     <div class="lower-content">
            <div class="col-1">
                <div class="scrollbox">
                    ........
                </div>
            </div>
            <div class="col-2">
                <img src="http://placehold.it/616x697/AA6600" alt="middle image" />
            </div>
            <div class="col-3">
                <p> .....
                </p>
                <img alt="Small Image" src="http://placehold.it/194x219/446600" />
            </div>
      </div>

我到目前为止的尝试显示在小提琴中

小提琴：http://jsfiddle.net/gg47G/2/

为了更好地观看：http://jsfiddle.net/gg47G/2/show

问题：我想要的是所有三列的相同高度，并且响应直到屏幕宽度= 768px。我已经找到了手机的布局（低于768px），只剩下桌面和平板电脑版本了。

浏览器：我也需要一个适用于IE8的解决方案。

可以为col-3添加边距和填充，但高度应与col1和col2匹配 Jquery解决方案是可以接受的，但没有外部库。虽然我更喜欢css解决方案，但我不认为这是可能的。

Answer 1

小提琴：fiddle

这里是js代码

$(document).ready(function(){
    commonHeightToAllDiv('.common');
});
// value will be changed if resied
$(window).resize(function(){
    commonHeightToAllDiv('.common')
});
function commonHeightToAllDiv(handeler){
    // calculating all the heights of .common
    var heights = $(handeler).map(function () {
            return $(this).height();
        }).get();

    // calculating maximum value among the heights
    var max_height_of_content_boxes = function (array)             {
        return Math.max.apply(Math, array);
    };

    // implementing maximum to all .common
    $(handeler).height(max_height_of_content_boxes(heights));
}

CSS代码

.lower-content {
    border-top: 1px solid #b2b2b2;
    margin: 1% auto 0;
    padding: 1% 0 0;
    width:1200px;
}

.col-1 {
    display: inline-block;
    padding: 0 1% 0 0;
    vertical-align: top;
    width: 22%;
}
.scrollbox{
    font-size: 1.2em;
    overflow: auto;
}
.col-2 {
    display: inline-block;
    margin: 0 1% 0 0;
    vertical-align: top;
    width: 53%;

 }

.col-3 {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    width: 22%;
}

说明：

每个div都有动态高度。首先，我们需要找到那些是什么。然后获得最大值。并在每个div上实现该值。调用响应函数使js代码响应。

具有可滚动div的高度相同的布局

1 个答案: