如何在 tumblr 中为 iframe pdf 创建两列格式

Question

我想知道如何格式化 2 个 pdf iframe 以形成一个 2 列，而不是在彼此之上。 3col-1
mypage-2

<p><iframe height="480" src="https://drive.google.com/file/d/1ctZfL6Qn_HTETYWy_EwSDcziSWDWKrrZ/preview" width="640"></iframe></p>

<p><iframe height="480" src="https://drive.google.com/file/d/1_d9a9XYmglngdxQ3JnQ3x9XMzQMhAJ2S/preview" width="640"></iframe></p>

谢谢！

Answer 1

有几个问题。

首先，有一个硬编码的宽度值被传递给 iframe，我不知道你可以编辑它，但你可以用 css 覆盖。

我不会依赖内联样式，而是抽象代码，以便它使用 class 名称并可在其他地方重用，然后编辑 css 属性比 [=53] 更容易=]（恕我直言）。

这是你的html

<p>
<p style="width:50%">
   <iframe height="480" src="https://drive.google.com/file/d/1ctZfL6Qn_HTETYWy_EwSDcziSWDWKrrZ/preview" width="640"></iframe>
</p>
<p>
<p style="width:50%">
  <iframe height="480" src="https://drive.google.com/file/d/1_d9a9XYmglngdxQ3JnQ3x9XMzQMhAJ2S/preview" width="640"></iframe>
</p>

我已将两个段落包装器更改为只有 50% 的宽度。而且在css.

里也加了float: left

一些额外的 css:

p {
    margin: 0;
    float: left;
}

p iframe {
    width: 100% !important; // this will override the hard coded width property
}

JSFIDDLE

我不会像你写 css 一样使用 p 元素，并且只针对它可能会破坏其他地方代码的段落，或者像 .half 一样为 50% 宽度制作 class 等或者创建一个带有父级 class 的 div 包装器，然后您可以定位其中的段落。 <div class="wrapper"><p>Paragraph text</p></div>等，然后可以写

.wrapper p {
   width: 50%
}

编辑

根据您在下面的评论，这里的内联 css 应该可以正常工作：

<p style="width:50%; float:left;">
   <iframe height="480" src="https://drive.google.com/file/d/1ctZfL6Qn_HTETYWy_EwSDcziSWDWKrrZ/preview" width="100%"></iframe>
</p>
<p>
<p style="width:50%; float:left;">
  <iframe height="480" src="https://drive.google.com/file/d/1_d9a9XYmglngdxQ3JnQ3x9XMzQMhAJ2S/preview" width="100%"></iframe>
</p>

请注意，每个 p 元素都有 width: 50% 和 float: left 属性，并且 iframe 宽度已更改为 100%。

已更新FIDDLE

如何在 tumblr 中为 iframe pdf 创建两列格式

How to create a two column format for an iframe pdf in tumblr

html

iframe

tumblr