html - 使列高相同

Question

我需要你的帮助。我想让过滤器部分与结果部分相同。但是，我很难让它与结果相同。我也一直在阅读关于 Equal Height Columns with Cross-Browser CSS 的文章

下面是我完成的代码。请注意，高度取决于结果 Pane 或过滤器 Pane 。

    #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 添加到那些同级 div 或其父级。否则，如您所见，它们默认将内容对齐到顶部。

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