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

-1

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

这是目前发生的事情的图像：

Here is an image of what currently happens:

有没有办法（未做都固定），以确保他们保持同样的高度？

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; 

}

来源

2014-04-29 MRC

HTML＆Current CSS please。 –

@Paulie_D不幸的是，我无法得到这种方法的工作，它似乎使它忽略宽度设置，并填充到100％。 – MRC

您可以选择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投入到塔型容器（重复-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%; 
}

来源

2014-04-29 12:36:03 AlexPrinceton

谢谢，表方法是我正在考虑的那个 – MRC

@joey，这是我第一次向你建议:( –

我不认为显示表是老派它是在1998年以后的标准中，只有IE8支持，它在语义上与HTML表格无关，list-item和table是可用于显示的值，并且是显示li和td的默认值，例如bloc是div。:) –

你有没有使用float几个选项：

display:table;对家长和display:table-cell对孩子。 DEMO
display:flex父母。 DEMO
而仿列的旧，但仍然坚实的技术：DEMO
&其他一些棘手之辈DEMO这其中涉及到floatting元素，或无伪元素的溢出隐藏相同的技术DEMO

来源

2014-04-29 12:34:37

Flex不适合，因为它也与宽度匹配。宽度必须设置。 – MRC

Flex是非常新的技术，几乎不支持主流浏览器 – AlexPrinceton

选项是不是必须做的选项:) –

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

回答

相关问题