Уценка и выравнивание изображения
https://stackoverflow.com/questions/255170
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я создаю сайт, на котором ежемесячно публикуются статьи в выпусках.Это просто, и я думаю, что с помощью редактора Markdown (например, Оружие массового уничтожения один здесь, в Stack Overflow) был бы идеальным.
Однако, им действительно нужна возможность выравнивания изображений по правому краю в заданном абзаце.
Я не вижу способа сделать это с текущей системой - возможно ли это?
Решение
Вы можете встроить HTML в Markdown, чтобы вы могли сделать что-то вроде этого:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
Другие советы
Много Markdown " дополнительные " процессоры поддерживают атрибуты. Таким образом, вы можете включить имя класса следующим образом (PHP Markdown Extra):
{.callout}
или, альтернативно (Маруку, Kramdown , Уценка Python ):
{: .callout}
Тогда, конечно, вы можете правильно использовать таблицу стилей:
.callout {
float: right;
}
Если ваш поддерживает этот синтаксис, он дает вам лучшее из обоих миров: без встроенной разметки и достаточно абстрактных таблиц стилей, чтобы их не нужно было изменять редактором контента.
Я нашел хорошее решение в чистой разметке с небольшим CSS & nbsp; 3 взломом : -)
Следуйте за плавающим изображением кода CSS 3 слева или справа, когда image alt заканчивается на < или >.
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
Встраивание CSS - это плохо:
CSS в другом файле:
img[alt=Flowers] { float: right; }
Мне нравится быть очень ленивым, используя таблицы для выравнивания изображений по вертикальной трубе (|) синтаксис.Это поддерживается некоторыми вкусами Markdown (а также поддерживается Текстиль если это пустит вашу лодку по течению):
| I am text to the left |  |
или
|  | I am text to the right |
Это не самое гибкое решение, но оно подходит для большинства моих простых нужд, легко читается в формате markdown, и вам не нужно запоминать ни CSS, ни необработанный HTML.
У меня есть альтернатива вышеописанным методам, в которых использовался тег ALT и селектор CSS для тега alt ... Вместо этого добавьте URL-хэш, например, так:
Сначала укажите свой код уценки:
Обратите внимание на добавленный URL-хэш #center.
Теперь добавьте это правило в CSS, используя CSS & nbsp; 3 селектора атрибутов для выбора изображений с определенным путем.
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
Вы должны иметь возможность использовать такой хеш URL-адреса, как определение имени класса, и это не является неправильным использованием тега ALT, как некоторые люди комментировали для этого решения. Это также не потребует каких-либо дополнительных расширений. Сделайте один для поплавка вправо и влево, а также для любых других стилей, которые вы можете захотеть.
Еще чище было бы просто поместить p#given img { float: right } в таблицу стилей или в <head> и обернуть в теги style. Затем просто используйте уценку .
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
Атрибут markdown внутри Markdown.
Мне понравился ответ learnvst об использовании таблиц, поскольку он достаточно читабелен (что является одной из целей написания Markdown).
Однако в случае синтаксического анализатора GitBook Markdown мне пришлось, в дополнение к пустой строке заголовка, добавить разделительную строку под ним, чтобы таблица была распознана и правильно отображена:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Разделительные линии должны содержать не менее трех тире ---.
Если вы реализуете его в Python, есть расширение , позволяющее добавить HTML-пары ключ / значение и метки класса / идентификатора. Синтаксис для этого:
{: style="float:right"}
Или, если встроенный стиль не плавает на вашей лодке,
{: .floatright}
с соответствующей таблицей стилей, stylish.css:
.floatright {
float: right;
/* etc. */
}
Как сказал Грег , вы можете встраивать HTML-контент в Markdown, но один из моментов Markdown - избегать необходимости обладать обширными (или какими-либо, в этом отношении) знаниями по разметке CSS / HTML, верно? Это то, что я делаю:
В моем файле Markdown я просто приказываю всем моим редакторам вики вставлять, чтобы обернуть все изображения чем-то вроде этого:
'<div> // Put image here </div>`
(конечно .. они не знают, что означает <div>, но это не должно иметь значения)
Итак, файл Markdown выглядит следующим образом:
<div>
![optional image description][1]
</div>
[1]: /image/path
И в контенте CSS, который охватывает всю страницу, я могу делать с тегом image все, что захочу:
img {
float: right;
}
Конечно, вы можете сделать больше с контентом CSS ... (в данном конкретном случае, обертка тега img с помощью div предотвращает наложение другого текста на изображение ... это всего лишь пример), но ИМХО смысл Markdown заключается в том, что вы не хотите, чтобы потенциально нетехнические люди вникали в тонкости CSS / HTML ... вы, как веб-разработчик, можете сделать свой CSS-контент это оборачивает страницу как можно более общей и чистой, но ваши редакторы не должны знать об этом.
У меня была такая же задача, и я выровнял свои изображения справа, добавив это:
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
Чтобы выровнять изображение по левому краю или центру, замените
<div style="text-align: right">
с
<div style="text-align: center">
<div style="text-align: left">
Самое простое - это обернуть изображение в центральный тег, например ...
<center></center>
Все, что связано с Markdown, можно проверить здесь - http://daringfireball.net/projects/markdown/ Dingus
Конечно, <center> может быть устаревшим, но это просто и работает!
