获取要对齐的元素

Question

我目前在我的网站上处理一些黑板，有时每块黑板的内容大小不一样。

所以我现在得到的是：

使用以下代码实现此目的：

var biggestHeight = 0;
$('.board .content').each(function(){
    if(biggestHeight === 0) biggestHeight = $(this).height();
    if(biggestHeight < $(this).height()) bigghestHeight = $(this).height();
});
biggestHeight = biggestHeight + 15;
$('.board .content').css({
    "height" : biggestHeight + "px",
});

我希望电路板是这样的：但是我希望电路板的尺寸不同，具体取决于内容尺寸，但是我希望电路板在草地后面的底部对齐，就像第一张照片一样。

重现问题的简单示例（未完全复制）：

.board{
  display: inline-block;
  background: gray;
  width: 30%;
  float: left;
  margin-left: 5px;
}
#boards-container{
  position: relative;
  width: 400px;
}
#boards-container .boards{
  position: absolute
}

<div id="boards-container">
  <div class="boards">
      <div class="board">
        <p>1st Event</p>
        <p>2nd Event</p>
        <p>3rd Event 3rd Event 3rd Event 3rd Event 3rd Event</p>
      </div>
      <div class="board">
        (This should align at bottom)
        <p>1st News</p>
      </div>
      <div class="board">
        (This should align at bottom)
        <p>1st Gallery</p>
        <p>2nd Gallery</p>
        <p>3rd Gallery</p>
      </div>
  </div>
</div>

需要在IE9 +中工作

Answer 1

要对齐，您可以将flex与flex-end一起使用，以便在容器底部对齐。有关flex align

的更多信息

.boards {
  display: flex;
  align-items: flex-end;
}

.board {
  display: inline-block;
  background: gray;
  width: 30%;
  float: left;
  margin-left: 5px;
}

#boards-container {
  position: relative;
  width: 400px;
}

#boards-container .boards {
  position: absolute
}

<div id="boards-container">
  <div class="boards">
    <div class="board">
      <p>1st Event</p>
      <p>2nd Event</p>
      <p>3rd Event 3rd Event 3rd Event 3rd Event 3rd Event</p>
    </div>
    <div class="board">
      (This should align at bottom)
      <p>1st News</p>
    </div>
    <div class="board">
      (This should align at bottom)
      <p>1st Gallery</p>
      <p>2nd Gallery</p>
      <p>3rd Gallery</p>
    </div>
  </div>
</div>

Answer 2

我更喜欢@Hash的回答，但这里是非Flexbox版本以防万一。

下行是需要为每个主板提供额外的包装div

＆＃13;

＆＃13;

.board{
  display: table-cell;
  vertical-align:bottom;
  background: gray;
  width: 30%;
  margin-top:auto;
  
}
#boards-container{
  position: relative;
  width: 400px;
}
#boards-container .boards{
  position: absolute
}

.wrap{
  margin-left: 5px;
  display:inline-block;
  background:red;
}

＆＃13;

<div id="boards-container">
  <div class="boards">
      <div class="board">
        <div class="wrap">
          <p>1st Event</p>
          <p>2nd Event</p>
          <p>3rd Event 3rd Event 3rd Event 3rd Event 3rd Event</p>
          </div>
      </div>
      <div class="board">
        <div class="wrap">
          (This should align at bottom)
          <p>1st News</p>
        </div>
      </div>
      <div class="board">
       <div class="wrap">
          (This should align at bottom)
          <p>1st Gallery</p>
          <p>2nd Gallery</p>
          <p>3rd Gallery</p>
        </div>
      </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

取决于您的整体预期结果。 它可能就像在这些板上设置一些css一样简单 - 位置：绝对和底部：0

Answer 4

也许不是一个完美的解决方案，因为它在Internet Explorer中不起作用。 只是使用CSS网格解决问题的另一种方法。

＆＃13;

＆＃13;

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns:  repeat(3, 140px);
  grid-template-rows: repeat( 4, 70px);
  background-color: #fff;
  color: #444;
}

.box {
  background: #ccc;
  border: 1px solid #444;
  padding: 10px;
  font-size: 14px;
}


.a {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
}

.b {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
}

.c {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: stretch;
}

＆＃13;

<div class="wrapper">
  <div class="box a">
    <p>1st Event</p>
    <p>2nd Event</p>
    <p>3rd Event 3rd Event 3rd Event 3rd Event 3rd Event</p>
  </div>
  <div class="box b">
    (This should align at bottom)
          <p>1st News</p>       
  </div>
  <div class="box c">
    (This should align at bottom)
      <p>1st Gallery</p>
      <p>2nd Gallery</p>
      <p>3rd Gallery</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;