CSS 또는 JavaScript가있는 두 개의 자동 열

Question

현재 웹 사이트를 개발 중이며 클라이언트는 여러 기사의 텍스트가 두 개의 열로 넘치기를 원합니다. 신문 같은 거 좋아? 그래서과 같습니다

Today in Wales, someone actually  Nobody was harmed in 
did something interesting.   the incident, although one 
Authorities are baffled by this  elderly victim is receiving 
development and have arrested the  counselling. 
perpetrator.  

[작성하는 것을 함께 올라오고에 내 정말 나쁜 시도]

혼자 단지 CSS와 함께이 작업을 수행 할 수있는 방법이 있나요? 여러 div를 사용하지 않아도됩니다. 나는 JavaScript를 사용하는 것에 대해서도 개방적이지만, 나는 그렇게 잘못되었다. 그래서 도움을 주겠다. 나는 JavaScript가 콘텐츠 div에 얼마나 많은 수를 계산할 수 있었는지 생각하고 있었다. 그런 다음 두 번째 절반을 움직여서 오른쪽으로 띄울 수 있을까? 아마도? 조언을 부탁드립니다 : D

Answer 1

우선, 나는 CSS가 그렇게 할 수 있다고 생각하지 않지만, 나는 틀린 것으로 입증되고 싶습니다.

둘째, 단락을 계산하면 전혀 도움이되지 않을 것입니다. 적어도 모든 높이가 필요하고이를 기반으로 텍스트 높이의 중간을 계산해야하지만 창 크기 조정 등을 고려해야합니다. 합리적으로 간단한 선반 솔루션이 있다고 생각하지 않습니다. 불행히도 나는이 문제에 대한 완벽한 해결책을 찾는데 비관적이지만, 흥미 롭다.

Answer 2

나는 백엔드에서 그 일이 무엇이든간에 그것을 처리 할 것입니다. PHP의 예는 보일 수 있습니다 같은 :

$content = "Today in Wales, someone actually did something..."; 
// Find the literal halfway point, should be close to the textual halfway point 
$pos = int(strlen($content)/2); 
// Find the end of the nearest word 
while ($content[$pos] != " ") { $pos++; } 
// Split into columns based on the word ending. 
$column1 = substr($content, 0, $pos); 
$column2 = substr($content, $pos+1); 

아마도 innerHTML을 가진 자바 스크립트에서 비슷한 일을 할 수 있어야하지만, 점점 더 많은 사람들이 그 비활성화가 노 스크립트와 같은 플러그인을 사용하고 있기 때문에 개인적으로 난 그 모든 상황을 피할 것 JavaScript가 명시 적으로 x 사이트에 허용 될 때까지 JavaScript는 다른 어떤 것보다도 div와 CSS가 좋게 저하되도록 설계되었습니다. JavaScript 솔루션은이 경우 심각하게 저하됩니다.

Answer 3

좋은 소식은 CSS only solution입니다. 나쁜 소식은 existing browsers에 주요 지원이 없다는 것입니다. 가장 좋은 건 일산화탄소 자동으로 열을 수행

Answer 4

Here's a JQuery plugin에서 언급 한 바와 같이 아마 서버 쪽 내가 지금 생각

div.multi { 
    column-count: 3 
    column-gap: 10px; 
    column-rule: 1px solid black;  
} 

을, 심지어 열 수를 변화 할 수있다 :이 구현 된 경우,이 같을 것이다 화면 크기에 따라 다릅니다.

본인은 직접 사용하지 않았지만 확인해 보았습니다.

Answer 5

Mootools를 사용하는 경우 MooColumns을 확인할 수 있습니다.

Answer 6

HTML/CSS/JS에서이 기능을 구현하는 것은 어렵습니다 (가능할 수도 있음).

신문은 선의 너비를 줄이기 위해 여러 열을 사용하여 텍스트를 더 읽기 쉽게 만듭니다. 종이 한 장에 하나의 열을 완성하면 눈을 뒤집을 수 있기 때문에 이것은 괜찮습니다.

웹에서 스크롤을 사용하여 텍스트가 화면 경계를 넘어가도록 허용하므로 열이 필요하지 않습니다.

Answer 7

Mozilla 전용 CSS 확장자 : -moz-column-count에서 지원됩니다.참조 : https://developer.mozilla.org/en/CSS3_Columns