#html #iframe #tumblr
#HTML #iframe #tumblr
Вопрос:
Я хотел бы знать, как отформатировать 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>
Спасибо!
Комментарии:
1. Bootstrap очень хорош для этого. Но если вы хотите создать свой собственный, просто назначьте ширину в процентах для каждой оболочки. Я бы сделал это с классами, но ради аргумента
<p style="width:50%"><iframe1></p><p style="width:50%"><iframe2></p>
% width не работает с полями, но они работают с заполнением. Если у вас есть 3-й столбец, который является частью полной ширины страницы, вы можете сделать 20%, 40%, 40% и т.д.2. @lharby спасибо за это! Я пробовал, но мне просто удалось получить масштабирование iframe pdf. есть ли способ иметь его рядом?
3.
<p><p style="width:100%"><iframe height="480" src="https://drive.google.com/file/d/1ctZfL6Qn_HTETYWy_EwSDcziSWDWKrrZ/preview" width="640"></iframe></p> <p><p style="width:100%"><iframe height="480" src="https://drive.google.com/file/d/1_d9a9XYmglngdxQ3JnQ3x9XMzQMhAJ2S/preview" width="640"></iframe></p>
4. Должно быть. Я попытаюсь создать jsfiddle позже.
Ответ №1:
Есть несколько проблем.
Во-первых, в 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
}
Я бы не стал использовать элемент 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
Комментарии:
1. Еще раз спасибо за это. Сейчас моя проблема заключается в том, чтобы поместить код css в html. Я использую Google Drive для загрузки своих файлов. можно ли вызвать css с помощью этого? или есть бесплатный сайт, позволяющий мне вызывать загруженный css?
2. страница tumblr, над которой я работаю, имеет только функцию HTML.
3. У вас есть несколько вариантов, вы можете отредактировать весь шаблон Tumblr и добавить css в тег style, это будет работать на других страницах, если вы используете похожие селекторы. Кроме того, каждое сообщение / страницу можно редактировать с помощью HTML, см. Прикрепленный. Вы можете переключаться между обычным текстом / HTML и вводить пользовательский css, если хотите. Встроенные стили в порядке. Я всегда стараюсь думать о том, чтобы сделать код повторно используемым. imgur.com/SnyVqOf
4. Понятно, я думаю, я собираюсь использовать встроенный стиль.
5.
p { margin: 0; float: left; } p iframe { width: 100% !important; // this will override the hard coded width property }
этот код работает, но он портит 1-ю страницу. как мне добавить это в встроенный стиль HTML?