如何使兩個單獨的列具有相同的長度？

-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

選項是不是必須做的選項:) –

如何使兩個單獨的列具有相同的長度？

回答

相關問題