如何在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

有几个问题。

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

与其依赖内联样式，我会对代码进行抽象，使其使用类名并在其他地方可重复使用，然后编辑css属性将比编辑html(IMHO(更容易。

这是你的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%宽度的类，要么用父类创建一个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