时间戳

首页 > 解决方案 > HTML：iframe 和段落在同一行

html - HTML：iframe 和段落在同一行

问题描述

我想在我的 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>

结果应如下所示： 结果应该是这样的

标签： htmlcssiframeinline

解决方案

您可以为此使用 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>

推荐阅读