Question

我有一个使用CSS网格设计的工作站点。职位列表和电子邮件订阅被grid-template-columns: (3fr, 1fr)除以，问题是电子邮件订阅框的高度与职位列表的高度相同（例如，如果有10个列表，这是一个很大的电子邮件订阅框），我该如何更改？（注意：底部包含的jsfiddle会使它更加清晰，我尝试在height上设置#item2值，但此方法无效）

.grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

#item1 {
  margin-left: 15px;
}

#item1>h1 {
  text-align: center;
}

#list_of_jobs {
  list-style: none;
}

#item2 {
  text-align: center;
  margin-right: 15px;
  border: 3px solid #eeeeee;
}

<div class="grid">
  <div id="item1">
    <h1>Jobs in 10529</h1>
    <table>
      <tbody>
        <div>
          <ul id="list_of_jobs">
            <li>
              <h2><a href="#">Job 1</a></h2>
              <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
            </li>
            <li>
              <h2><a href="#">Job 2</a></h2>
              <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
            </li>
            <li>
              <h2><a href="#">Job 3</a></h2>
              <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
            </li>
            <li>
              <h2><a href="#">Job 4</a></h2>
              <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
            </li>
          </ul>
        </div>
      </tbody>
    </table>
  </div>
  <div id="item2">
    <form>
      <p>Subscribe to recieve job alerts near 105</p>
      <!-- query stores zip code-->
      <input type="text" placeholder="Email">
      <button class="btn" type="submit">Subscribe</button>

    </form>
  </div>
</div>
<!-- close grid div-->

http://jsfiddle.net/bmy0s93k/2/

Answer 1

将此添加到您的代码中：

#item2 {
   align-self: start;
}

revised fiddle

网格容器（如flex容器）中的默认设置为align-items: stretch。这意味着网格项目（如弹性项目）将拉伸容器中相关轴的整个长度。

您需要覆盖默认值。

参考文献：

控制CSS网格中相邻列的高度

1 个答案: