使柱高相同

Question

我需要你的幫助。我想使過濾器部分與結果部分相同。但是，如何使結果與結果一致，我很難。我也一直在閱讀有關Equal Height Columns with Cross-Browser CSS

的文章以下是我所做的代碼。請注意，高度取決於結果窗格或篩選器窗格。

#SearchAll tr td { 
 
     vertical-align: top; 
 
    } 
 
    
 
    #SearchAllPane { 
 
     background: grey; 
 
    } 
 
    
 
    #container1 { 
 
     float: left; 
 
     border: 1px solid; 
 
    } 
 
    
 
    #container2 { 
 
     float: left; 
 
    } 
 
    
 
    #col1 { 
 
     float: left; 
 
     width: 160px; 
 
     background: white; 
 
     padding-left: 10px; 
 
     height: calc(100% - 54px); 
 
    } 
 
    
 
    #col2 { 
 
     float: left; 
 
     width: 20px; 
 
     /*background: grey;*/ 
 
    } 
 
    
 
    #col2 img { 
 
     width: 18px; 
 
     height: 18px; 
 
    } 
 
    
 
    .FilterItem { 
 
     height: 30px; 
 
     line-height: 30px; 
 
    } 
 
    
 
    #ResultTable { 
 
     width: 300px; 
 
     border: 1px solid; 
 
    } 
 
    
 
    .ResultRow { 
 
     height: 30px; 
 
     line-height: 30px; 
 
     background-color: green; 
 
     font-size: 15px; 
 
    }

<table id="SearchAll"> 
 
     <tr> 
 
     <td id="SearchAllPane"> 
 
      <div id="container2"> 
 
      <div id="container1"> 
 
       <div id="col1"> 
 
       <div class="FilterItem"> 
 
        Filter 1 
 
       </div> 
 
       <div class="FilterItem"> 
 
        Filter 1 
 
       </div> 
 
       <div class="FilterItem"> 
 
        Filter 1 
 
       </div> 
 
       </div> 
 
       <div id="col2"> 
 
       <img src="http://uxrepo.com/static/icon-sets/font-awesome/svg/angle-left.svg" /> 
 
       </div> 
 
      </div> 
 
      </div> 
 
    
 
     </td> 
 
     <td> 
 
      <table id="ResultTable"> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
    </table>

這裏是我做了什麼鏈接：這將會使造型更難以http://jsfiddle.net/arw5n4qb/

Answer 1

您的標記是相當複雜的;這是一個簡單的版本。 （運行下面的代碼片段，或者看到這個jsfiddle。）重要的部分是：一個div包含左側內容，一個包含右側，並且這兩個設置爲display: table-cell。他們的父容器設置爲display: table;。同胞元素設置爲display: table-cell將自動坐在一起，沒有包裝。他們也會匹配他們的高度，所以他們都會和最高的內容一樣高。

如果您希望過濾器和行彼此垂直居中，您可以將vertical-align: middle添加到這些兄弟區域或其父級。否則，正如你所看到的，他們默認沿着頂部排列他們的內容。

.container { 
 
    display: table; /* important */ 
 
    border: 1px solid gray; 
 
} 
 

 
.filters, 
 
.results { 
 
    display: table-cell; /* also important */ 
 
    width: 200px; 
 
} 
 

 
.filters { 
 
    background: white; 
 
} 
 

 
/* the rest is cosmetic - 
 
* change these styles if needed */ 
 
.filter, .result { 
 
    line-height: 2; 
 
    padding: 0 10px; 
 
} 
 

 
.result { 
 
    background: green; 
 
    color: white; 
 
    border: 1px solid white; 
 
}

<div class="container"> 
 
    <div class="filters"> 
 
    <div class="filter">Filter 1</div> 
 
    <div class="filter">Filter 2</div> 
 
    <div class="filter">Filter 3</div> 
 
    </div> 
 
    <div class="results"> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    </div> 
 
</div>