如何使两个单独的列长度相同？ [复制]

Question

我有两列，一列向左浮动，另一列向右浮动。

内容通常会有不同的长度，但内容较少的内容总是需要与内容较多的内容大小相同。

这是当前发生的情况的图像：

有没有办法（不固定）来确保它们保持相同的高度？

HTML：

 <div class="leftCol">
  <div class="singleArrow"></div>
      <div class="sectionBlock">
        <div class="sectionBlockContentNarrow"> 
                    SOME TEXT
        </div>
      </div>
  </div>
  <div class="rightCol">
  <div class="singleArrow"></div>
      <div class="sectionBlock">
        <div class="sectionBlockContentNarrow"> 
                    SOME TEXT
        </div>
      </div>
  </div>

CSS：

.singleArrow{
    margin:0 auto;
    width:50px;
    height:23px;
    background-image:url('../images/downarrow-lrg.png');
    background-repeat:no-repeat;
    margin-top:20px;
    margin-bottom:20px;
}

.leftCol{
    float:left;
    width:300px;
}

.rightCol{
    float:right;
    width:300px;
}
.sectionBlock {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    width: 100%;
    min-height: 40px;
    background-color: rgb(246,246,246);
    margin-top: 20px;
    background-image: url('../images/bar.png');
    background-repeat: repeat-x;
    padding: 4px 0 0 10px;
    padding-bottom:20px;
    }

.sectionBlockContent{
    padding: 30px 20px 10px 30px;

}
.sectionBlockContentNarrow{
    padding: 30px 10px 10px 10px;

}

Answer 1

您可以选择 2 种变体

1.) JS（恕我直言）

$(window).load(function() {
    //call the equalize height function
    equalHeight($("div.left, div.middle, div.right"));

    //equalize function
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = $(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
}); 

2.) 背景造型（老派）

您需要从 PSD 中剪切 1 px bg 并将 bg 放入列容器（repeat-y）

3.) 表（老派） HTML

 <div class="container">
        <div class="child">...</div>
        <div class="child">...</div>
        <div class="child">...</div>
    </div>

CSS

.container {
    display: table;
}

.child {
    display: table-cell;
    width: 33.33%;
}

Answer 2

你有几个选择不使用float：

1. display:table; 在父母身上，display:table-cell 在孩子身上。 DEMO
2. display:flex 在父级上。 DEMO
3. 还有老式但仍然可靠的仿柱技术：DEMO
4. 还有其他一些棘手的DEMO这个涉及浮动元素，或者没有伪元素，同样的溢出隐藏技术DEMO