html - 将 iframe 与其他元素对齐

Question

我正在尝试对齐父 div 中的多个 iframe，所有 iframe 都将以内联方式显示，并带有一些边距。 这就是我希望完成的解决方案的样子(使用按钮创建以显示预期结果):

    #content {
      border: solid 3px #00FF00;
      padding-bottom: 15px;
    }

    #content h2 {
      margin-left: 15px;
    }

    #content button {
      margin-left: 15px;
      width: 100px;
      height: 50px;
     }

    <div id="content">
      <h2>Header</h2>
      <button>Button 1</button>
      <button>Button 2</button>
      <button>Button 3</button>
      <button>Button 4</button>
      <button>Button 5</button>
    </div>

https://jsfiddle.net/sovap/9du1rz56/

这是我需要更新的结构:

    #content {
      border: solid 3px #00FF00;
      padding-bottom: 15px;
    }

    #content h2 {
      margin-left: 15px;
    }

    #content iframe, button {
      margin-left: 15px;
      width: 100px;
      height: 50px;
    }

  <div id="content">
      <h2>Header</h2>
      <button>Button 1</button>
      <iframe src="some.html" frameborder="0" scrolling="no"></iframe>
      <button>Button 2</button>
      <iframe src="some.html" frameborder="0" scrolling="no"></iframe>
      <button>Button 3</button>
    </div>

https://jsfiddle.net/sovap/zxm8wjso/

那么对于那些将与按钮内联的 iframe 需要做什么？

感谢您的时间和精力!

Answer 1

我向父 div 添加了 display:flex 和 align-items:flex-end。

#content {
  border: solid 3px #00FF00;
  padding-bottom: 15px;
  display:flex;
  align-items:flex-end;
}

#content h2 {
  margin-left: 15px;
}

#content iframe, button {
  margin-left: 15px;
  width: 100px;
  height: 50px;
 }

<div id="content">
  <h2>Header</h2>
  <button>Button 1</button>
  <iframe src="some.html" frameborder="0" scrolling="no"></iframe>
  <button>Button 2</button>
  <iframe src="some.html" frameborder="0" scrolling="no"></iframe>
  <button>Button 3</button>
</div>