Блог

Я хотел бы знать, как отформатировать 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>
  

Спасибо!

Есть несколько проблем.

Во-первых, в iframes передается жестко заданное значение width, я не знаю, можете ли вы это отредактировать, но вы можете переборщить с css.

Вместо того, чтобы полагаться на встроенные стили, я бы абстрагировал код, чтобы он использовал имена классов и мог использоваться повторно в другом месте, и тогда редактировать свойства css будет проще, чем html (ИМХО).

Вот ваш 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%. Но также добавлен float: left в css.

Некоторые дополнительные css:

 p {
    margin: 0;
    float: left;
}

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

JSFIDDLE

Я бы не стал использовать элемент p, как если бы вы писали css и предназначались только для абзацев, это могло бы нарушить работу кода в другом месте, либо создайте класс шириной 50%, например .half etc, либо создайте оболочку 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