HTML: iframe 和段落在同一行

Question

我想在 HTML 页面上的 div 中的同一行中放置一个 iframe 和一个段落。这应该会创建页面预览和旁边的描述。

<div class="element">
    <div class="preview">
        <iframe width="640px" height="360px" src="http://example.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
    </div>
    <div class="description">
        <h4>Header</h4>
        <p>Paragraph</p>
    </div>
</div>

结果应该是这样的：

Answer 1

不要使用 inline、inline-block 或 float 来设计样式，除非您设计了电子邮件模板！

在这种情况下，合适的工具是 flexbox 或 css-grid。使用 flexbox.

可以轻松完成此类简单设置

从 iframe 中删除内联样式。
将 flexbox 应用于容器：.element { display: flex; }
对 .preview 和 .description 应用宽度，加起来等于 100%：.element > div { width: 50%; }
添加 element * { box-sizing-border-box; } 以防止可能由 borders 和 margins.
引起的溢出问题
将position: relative;添加到.preview
将 position: absolute; top: 0; left: 0; width: 100%; height: 100%; 添加到 iframe 以便 iframe 填充整个容器的高度和宽度。

.element {
  display: flex;
}

.element > div {
  width: 50%;
}

.element * {
  box-sizing: border-box;
}

.preview {
  position: relative;
}

.preview iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* for demonstration purpose only */
.element > div {
  margin: 0;
  border: 1px solid red;
}

<div class="element">
  <div class="preview">
    <iframe src="http://example.com"></iframe>
  </div>
  <div class="description">
    <h4>Header</h4>
    <p>Paragraph</p>
  </div>
</div>

Answer 2

您可以为此使用 flexbox：

.element {
    display: flex;
    flex-wrap: nowrap;
}

<div class="element">
    <div class="preview">
        <iframe width="640px" height="360px" src="http://example.com"></iframe>
    </div>
    <div class="description">
        <h4>Header</h4>
        <p>Paragraph</p>
    </div>
</div>

或者这样：

<div class="element" style="display:flex; flex-wrap:nowrap">
    <div class="preview">
        <iframe width="640px" height="360px" src="http://example.com"></iframe>
    </div>
    <div class="description">

        <h4>Header</h4>
        <p>Paragraph</p>
    </div>
</div>

HTML: iframe 和段落在同一行

HTML: iframe and paragraph on the same line

html

css

iframe

inline