CSS3 열-강제 중단 / 분할 요소?

CSS3 열-강제 중단 / 분할 요소?

---

column-count: 2;column-gap: 20px;일부 콘텐츠를 두 개의 열로 분할하기 위해 일부 CSS3 열 ( )을 사용하고 있습니다. 내 콘텐츠에는 <p>, a <blockquote>, 또 다른 <p>.

내 질문 : 내 <blockquote>(또는 다른 지정된 요소)가 두 개의 열로 분할되는 것을 방지하는 방법이 있습니까?

예를 들어, 현재 my <blockquote>는 부분적으로 열 1에 있고 부분적으로 열 2에 있습니다.

이상적으로 <blockquote>는 1 또는 2 열에 함께 머물 수 있도록 만들고 싶습니다 .

이것이 달성 될 수 있는지 아십니까?

감사!

---

display:inline-block;분할을 방지하려는 항목에 추가하십시오 .

---

이론상 당신이 찾고있는 속성은 ...

blockquote {
  column-break-inside : avoid;
}

그러나 지난번에 Webkit에서 제대로 구현되지 않았는지 확인했습니다. 나는 더 많은 행운을 얻었습니다.

blockquote {
  display: inline-block;
}

렌더러가 이미지로 처리하고 열 사이에서 나누지 않습니다.

---

이 포럼에 충돌하고 Firefox에 대한 솔루션이 필요한 다른 사람들을위한 일반적인 참고 자료입니다.

이 글을 쓰는 시점에서 Firefox 22.0은 접두사가있는 column-break-inside경우에도 속성을 지원하지 않았습니다 -moz-.

하지만 해결책은 아주 간단합니다. 그냥 display:table;. ** display:inline-block;이러한 솔루션의 문제점은 목록 항목이 목록 스타일 항목이나 글 머리 기호 아이콘을 잃게된다는 것입니다.

** 또한 내가 경험 한 한 가지 문제 display:inline-block;는 연속 된 두 목록 항목의 텍스트가 매우 짧으면 아래쪽 항목이 그 위에있는 항목과 줄 바꿈되고 인라인된다는 것입니다.

display:table; 두 솔루션 중 가장 최악입니다.

자세한 정보 : http://trentwalton.com/2012/02/13/css-column-breaks/

---

MDN에 따르면 올바른 해결책은

blockquote {
  break-inside: avoid-column;
}

그러나 이것은 아직 모든 브라우저에서 구현되지 않았 으므로 실용적인 솔루션은 다음과 같습니다.

blockquote {
  display: inline-block;
}

참고 URL : https://stackoverflow.com/questions/8506783/css3-columns-force-non-breaking-splitting-element