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 需要做什么呢？

感谢您的时间和精力！

标签： htmlcss

Answer 1

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

#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>