Question

iam尝试在父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

我将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>

将iframe与其他元素内联对齐

1 个答案: