Sütun yüksekliğini aynı yapın

Question

Bu konuda yardımınıza ihtiyacım var. Filtre bölümünü sonuç bölümü ile aynı yapmak istiyorum. Bununla birlikte, sonuçlarda olduğu gibi nasıl yapılacağı konusunda da zor bir zaman geçiriyorum. Ayrıca, şu an yaptığım kodlar da şu makaleyi okuyordum: Equal Height Columns with Cross-Browser CSS

. Yüksekliğin, sonuçlar bölmesine veya filtreler bölmesine bağlı olduğunu unutmayın. İşte

#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>

Yaptığım şeyin bağlantısı verilmiştir: http://jsfiddle.net/arw5n4qb/

Answer 1

İşaretlemeniz oldukça karmaşıktır Daha sert stil yapacak; İşte basit bir versiyon. (Aşağıdaki pasajı çalıştırın veya bu jsfiddle'a bakın.) Önemli kısım şudur: Bir div, sol taraftaki içeriği, bir tanesi sağ tarafı içerir ve her ikisi de display: table-cell olarak ayarlanmıştır. Ana konteynerleri display: table; olarak ayarlanmıştır. Kardeş öğeleri display: table-cell olarak ayarlandığında, otomatik olarak birbirini sarmalamadan yan yana yerleştirir. Ayrıca yüksekliklerini eşleştirecekler, böylece her ikisi de en uzun içerik kadar uzun olacak.

Filtrelerin ve satırların birbirleriyle dikey olarak ortalanmasını istiyorsanız, bu kardeşler veya ebeveynleri için vertical-align: middle'u ekleyebilirsiniz. Aksi takdirde, görebildiğiniz gibi, içeriklerini en üste hizalamak için varsayılan olarak varsayılan değerlerdir.

.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>