如何将 div 中的元素对齐以连续排列其他元素？

Question

我在尝试对齐行中显示的三个图标容器时遇到了困难。我尝试了flex-end 和baseline 的组合，但它们在容器内的img 标签或h3 标签上都不起作用。这是我的代码以及jsfiddle：

编辑：我希望能够将图像与 div 的底部对齐，因此内容是均匀的。我记得之前用 flexbox 就搞定了，忘了是怎么做的了。这是使用我已经尝试过的属性的一些变化，但也许我用错了？不完全确定！

.icons {
  display: inline-flex;
}
.icons img {
  vertical-align: baseline;
  align-self: flex-end;
  align-content: flex-end;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
}
.icons h3 {
  vertical-align: baseline;
  align-self: baseline;
  align-content: baseline;
  align-items: baseline;
  justify-content: baseline;
  flex-direction: column;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<div class="container">
  <div class="icons">
    <div class="col-md-4">
      <div class="icon">
        <img src="https://via.placeholder.com/88x131"/>
        <h3>Header 1</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <img src="https://via.placeholder.com/116x98"/>
        <h3>Header 2</h3>
        <span>Lorem ipsum dolor sit amet</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <img src="https://via.placeholder.com/107x116"/>
        <h3>Header 3</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elitl Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 1

您可以使用引导程序中的row 类将图像放在自己的行中。 （可能需要调整以放入一些 col-sm 类，但这可能会让你开始）

.icons img {
    vertical-align: baseline;
    align-self: flex-end;
    align-content: flex-end;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
}
.icons h3 {
    vertical-align: baseline;
    align-self: baseline;
    align-content: baseline;
    align-items: baseline;
    justify-content: baseline;
    flex-direction: column;
}

.bottom-align {
    height: 150px;
}

.bottom-align img {
    position: absolute;
    bottom:0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="container">
  <div class="icons">
    <div class="row">
      <div class="col-md-4 bottom-align">
        <img src="https://via.placeholder.com/88x131">
      </div>
      <div class="col-md-4 bottom-align">
        <img src="https://via.placeholder.com/116x98">
      </div>
      <div class="col-md-4 bottom-align">
        <img src="https://via.placeholder.com/107x116">
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
      <div class="icon">
        <h3>Header 1</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <h3>Header 2</h3>
        <span>Lorem ipsum dolor sit amet</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <h3>Header 3</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elitl Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
    </div>
  </div>
</div>

Answer 2

https://jsfiddle.net/DTcHh/95598/

您可以将图像包装在 div 中并为 div 分配一个类 (myImg)：

.icons {
  display: flex;
}

.myImg {
  height: 140px;
  display: flex;
  align-items: flex-end;
}

<div class="container">
  <div class="icons">
    <div class="col-md-4">
      <div class="icon">
        <div class="myImg">
        <img src="https://via.placeholder.com/88x131"/>
        </div>
        <h3>Header 1</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <div class="myImg">
        <img src="https://via.placeholder.com/116x98"/>
        </div>
        <h3>Header 2</h3>
        <span>Lorem ipsum dolor sit amet</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <div class="myImg">
         <img src="https://via.placeholder.com/107x116"/>
        </div>
        <h3>Header 3</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elitl Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
  </div>
</div>

然后使用 min-height，如果您也想要相同高度的图像，也可以设置 div 的图像min-width（他们调整大小的想法，所以考虑使用 object-fit:cover 甚至更好的设置图像作为背景，然后使用 background-size: cover;)