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

问题描述

我想知道如何将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>

谢谢！

解决方法

有两个问题。

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

我不依赖于内联样式，而是对代码进行抽象处理，以便它使用类名，并且可以在其他地方重用，然后比html（IMHO）更容易编辑css属性。

这是您的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

我不会使用ap元素，就好像您确实写了css一样，并且仅将其作为目标段落可能会破坏其他地方的代码，或者像.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