Remark: 2 열 서식?

나는 발언이 처음이고, 내가 틀렸다면 나를 수정하지만 CSS를 추가 할 수 있습니다.

ul {
위치 : 상대;
}
li :: before {
배경 : url ( 'someimage.jpg')
내용 : '';
왼쪽 : -5px;
위치 : 절대;
상단 : 5px;
}

또는 그 효과에 대한 것.

음, 배경 이미지가되고 싶지 않습니다.

나는 다음과 같은 것을 시도했다.

.left-column30 {
      width: 30%;
      float: left;
}

.right-column70 {
      width: 68%;
      float: right;
      }


.left-column30[
- Point 1
- Point 2
]
.right-column70[![](TwoWaves.png) ]

... 아주 잘 작동합니다. 그러나 스타일에 인수를 전달하는 메커니즘이없는 경우를 제외하고는 열에 대해 많은 비율을 지정해야합니다. 즉 다음과 같습니다.

.left-column{width: 60%;}[
- My stuff
]

새로운 질문 :

멍청한 질문을하는 동안 : + remark.less + 파일에서 제목을 슬라이드의 왼쪽 상단에 더 가깝게 이동하는 방법을 볼 수 없습니다. 거기에 많은 공백이 있습니다.

감사!

변수 분할이있는 두 개의 열이 필요하므로 다음과 같은 것을 제안합니다.

class: split-40

.column[
left
]
.column[
right
]

그리고 해당 CSS :

.column:first-of-type {float:left}
.column:last-of-type {float:right}

.split-40 .column:first-of-type {width: 40%}
.split-40 .column:last-of-type {width: 60%}

그런 다음 항상 슬라이드에 두 개의 .column[...] 블록을 가질 수 있으며, 다른 슬라이드 클래스를 지정하여 간단히 분할을 조정할 수 있습니다 (예 : split-30 , split-40 , ...

데모 : http://jsfiddle.net/7vbby1df/

기본적으로 제목 주위에 약간의 추가 간격이 있습니다. 왼쪽 상단 모서리로 닫히려면 슬라이드 자체의 패딩 일부와 제목 <h1> 태그의 상단 여백 일부를 제거해야합니다.

데모 : http://jsfiddle.net/uk45km0h/

해결 된대로 닫습니다. 필요에 따라 다시여십시오.

대단히 감사합니다, 매우 도움이됩니다! 지난번에 발표에 발언을 사용했는데 매우 잘 작동했습니다. .left-content30 / .right-content70 클래스를 여러 개 정의해야했는데 약간의 고통 이었지만 그 후에는 잘 작동했습니다.

@gnab 안녕하세요, 시도해 보았습니다. 마지막 열은 remarkjs와 함께 :last-of-type 선택자를 얻을 수 없습니다.

위의 @gnab 의 제안은 정말 깨끗하지만 저에게 효과가 없었습니다 (아마 CSS 표준이 변경 되었습니까? 저는 CSS 사람이 아닙니다)

그러나 이것은 효과가 있습니다.

.cols[
.fifty[
left

- a
- b
- c
]

.fifty[
right

- a
- b
- c
]
]

CSS :

  .cols {
    display: flex;
  }

  .fifty {
    flex: 50%;
  }