Уценка и выравнивание изображения - PullRequest
Новая
       23

Уценка и выравнивание изображения

158 голосов
/ 01 ноября 2008

Я делаю сайт, который публикует статьи в выпусках каждый месяц. Это просто, и я думаю, что использование редактора Markdown (такого как WMD здесь в Stack Overflow) было бы идеально.

Однако, им нужна возможность выравнивать изображения по правому краю в данном абзаце .

Я не вижу способа сделать это с текущей системой - возможно ли это?

Ответы [ 13 ]

157 голосов
/ 01 ноября 2008

Вы можете встроить HTML в Markdown, так что вы можете сделать что-то вроде этого: 

<img style="float: right;" src="whatever.jpg">

Continue markdown text...
49 голосов
/ 29 апреля 2013

Многие «лишние» процессоры Markdown поддерживают атрибуты. Таким образом, вы можете включить имя класса следующим образом (PHP Markdown Extra): 

![Flowers](/flowers.jpeg){.callout}

или, альтернативно (Maruku, Kramdown , Python Markdown ): 

![Flowers](/flowers.jpeg){: .callout}

Тогда, конечно, вы можете правильно использовать таблицу стилей: 

.callout {
    float: right;
}

Если ваш поддерживает этот синтаксис, он дает вам лучшее из обоих миров: нет встроенной разметки и достаточно абстрактной таблицы стилей, чтобы ее не нужно было изменять редактором контента.

35 голосов
/ 21 сентября 2016

Я нашел хорошее решение в чистой Markdown с небольшим CSS 3 хаком : -) 

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

Следуйте за плавающим изображением кода 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;
}
22 голосов
/ 20 февраля 2011

Встраивание CSS - это плохо: 

![Flowers](/flowers.jpeg)

CSS в другом файле: 

img[alt=Flowers] { float: right; }
20 голосов
/ 24 января 2013

Мне нравится быть супер-ленивым, используя таблицы для выравнивания изображений с синтаксисом вертикальной трубы (|). Это поддерживается некоторыми разновидностями Markdown (и также поддерживается Textile , если это плавает на вашей лодке): 

| I am text to the left  | ![Flowers](/flowers.jpeg) |

или 

| ![Flowers](/flowers.jpeg) | I am text to the right |

Это не самое гибкое решение, но оно подходит для большинства моих простых потребностей, легко читается в формате уценки, и вам не нужно запоминать ни CSS, ни необработанный HTML.

16 голосов
/ 29 апреля 2017

У меня есть альтернатива вышеописанным методам, в которых использовался тег ALT и селектор CSS в теге alt ... Вместо этого добавьте URL-хэш, например:

Сначала код вашего Markdown изображения: 

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

Обратите внимание на добавленный URL хэш # центр.

Теперь добавьте это правило в CSS, используя селекторы атрибутов CSS 3 для выбора изображений с определенным путем. 

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

Вы должны иметь возможность использовать хэш URL-адреса, подобный этому, почти как при определении имени класса, и это не является неправильным использованием тега ALT, как некоторые люди комментировали для этого решения. Это также не потребует каких-либо дополнительных расширений. Сделайте один для поплавка вправо и влево, а также для любых других стилей, которые вам могут понадобиться.

9 голосов
/ 14 ноября 2010

Еще чище было бы просто поместить p#given img { float: right } в таблицу стилей или в <head> и обернуть в style теги. Затем просто используйте уценку ![Alt text](/path/to/img.jpg).

8 голосов
/ 04 августа 2009 
<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

Атрибут markdown возможность внутри Markdown.

6 голосов
/ 03 июня 2016

Мне понравился ответ Learnvst об использовании таблиц, потому что он вполне читабелен (что является одной из целей написания Markdown).

Однако в случае анализатора Markdown GitBook мне пришлось, в дополнение к пустой строке заголовка, добавить разделительную строку под ним, чтобы таблица была распознана и правильно отображена: 

| - | - |
|---|---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

Строки разделителя должны содержать не менее трех тире ---.

6 голосов
/ 27 сентября 2013

Если вы реализуете его в Python, существует расширение , которое позволяет добавлять пары ключ / значение HTML и метки class / id. Синтаксис для этого: 

![A picture of a cat](cat.png){: style="float:right"}

Или, если встроенный стиль не плавает на вашей лодке, 

![A picture of a cat](cat.png){: .floatright}

с соответствующей таблицей стилей, stylish.css: 

.floatright {
    float: right;
    /* etc. */
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...