如何使两个单独的列长度相同？

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（imho the best）

$(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。）Bg造型（旧学校）

你需要从你的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