매월 이슈에 기사를 게시하는 사이트를 만들고 있습니다. 간단하고 Markdown 편집기 ( 스택 오버플로 의 WMD 편집기)를 사용하는 것이 완벽하다고 생각합니다.
그러나 특정 단락에서 이미지를 올바르게 정렬 할 수있는 기능이 필요합니다 .
현재 시스템으로 그렇게하는 방법을 볼 수 없습니다. 가능합니까?
답변
Markdown에 HTML을 포함시킬 수 있으므로 다음과 같이 할 수 있습니다.
<img style="float: right;" src="whatever.jpg">
Continue markdown text...답변
작은 CSS 3 해킹 으로 순수한 Markdown 에서 멋진 솔루션을 찾았습니다. 🙂
왼쪽이나 오른쪽에있는 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;
}답변
많은 Markdown “추가”프로세서가 속성을 지원합니다. 따라서 다음과 같은 클래스 이름을 포함 할 수 있습니다 (PHP Markdown Extra).
{.callout}또는 대안 적으로 (Maruku, Kramdown , Python Markdown ) :
{: .callout}그런 다음 스타일 시트를 올바른 방법으로 사용할 수 있습니다.
.callout {
float: right;
}이 구문을 지원하는 경우 내장 된 마크 업이없고 컨텐츠 편집기로 수정할 필요가없는 스타일 시트 초록이 두 가지 장점을 모두 제공합니다.
답변
alt 태그에서 ALT 태그와 CSS 선택기를 사용하는 위의 방법에 대한 대안이 있습니다 … 대신 다음과 같이 URL 해시를 추가하십시오.
먼저 마크 다운 이미지 코드 :
추가 된 URL 해시 #center에 유의하십시오.
이제 CSS 3 속성 선택기를 사용하여 CSS에이 규칙을 추가하여 특정 경로가있는 이미지를 선택하십시오.
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}거의 클래스 이름을 정의하는 것과 같이 이와 같은 URL 해시를 사용할 수 있어야하며 일부 사람들이 해당 솔루션에 대해 언급 한 것처럼 ALT 태그를 오용하지 않습니다. 또한 추가 확장이 필요하지 않습니다. 플로트 오른쪽과 왼쪽뿐만 아니라 원하는 다른 스타일 중 하나를 수행하십시오.
답변
CSS를 포함시키는 것은 나쁘다 :
다른 파일의 CSS :
img[alt=Flowers] { float: right; }답변
테이블을 사용하여 이미지를 세로 파이프 ( |) 구문에 맞추면 매우 게으르고 싶습니다 . 이것은 일부 Markdown 맛에 의해 지원됩니다 (그리고 보트에 떠 다니면 Textile에 의해 지원됩니다 ).
| I am text to the left |  |또는
|  | I am text to the right |가장 유연한 솔루션은 아니지만 대부분의 간단한 요구에 적합하고 마크 다운 형식으로 읽기 쉽고 CSS 또는 원시 HTML을 기억할 필요가 없습니다.
답변
더 깔끔한 것은 p#given img { float: right }스타일 시트 나 태그에 <head>싸서하는 것입니다 style. 그런 다음 markdown을 사용하십시오 .