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添加到这些同级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>

使柱高相同

1 个答案: