Tự động hai cột với CSS hoặc JavaScript

Question

Tôi hiện đang phát triển một trang web và khách hàng của tôi muốn văn bản của nhiều bài viết khác nhau tràn vào hai cột. Loại giống như trong một tờ báo? Vì vậy, nó sẽ trông như thế:

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.  

[nỗ lực thực sự tồi tệ của tôi lúc đến với một cái gì đó để viết]

Có cách nào tôi có thể làm được điều này chỉ với CSS một mình? Tôi không muốn sử dụng nhiều div. Tôi cũng đang mở để sử dụng JavaScript, nhưng tôi thực sự là xấu ở đó, vì vậy trợ giúp sẽ được đánh giá cao. Tôi đã suy nghĩ có lẽ JavaScript có thể đếm bao nhiêu < p> 's có trong div nội dung, và sau đó di chuyển nửa thứ hai trong số họ được thả nổi phải dựa trên đó? Có lẽ? Lời khuyên sẽ được đánh giá cao: D

Answer 1

Trước hết, tôi không nghĩ rằng chỉ css có thể làm điều đó, nhưng tôi rất muốn được chứng minh là sai.

Thứ hai, chỉ cần đếm đoạn văn sẽ không giúp bạn chút nào, bạn cần ít nhất tất cả chiều cao và tính toán chiều cao của văn bản dựa trên đó, nhưng bạn phải tính đến thay đổi kích thước cửa sổ v.v. Không nghĩ rằng có một giải pháp hợp lý đơn giản ra khỏi kệ. Thật không may là tôi bi quan về việc tìm kiếm một giải pháp hoàn hảo cho vấn đề này, nhưng nó là một điều thú vị.

Answer 2

Tôi có thể xử lý nó trong chương trình phụ trợ của bạn, bất kể điều gì xảy ra. Một ví dụ trong PHP có thể trông giống như:

$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); 

Nó có lẽ ta có thể làm điều gì đó tương tự trong JavaScript với innerHTML, nhưng cá nhân tôi muốn tránh điều đó toàn bộ tình hình vì ngày càng có nhiều người đang sử dụng plugin như NoScript rằng disable JavaScript cho đến khi nó được cho phép một cách rõ ràng cho trang x, và trên bất cứ thứ gì khác, div và CSS được thiết kế để làm suy giảm độc đáo. Một giải pháp JavaScript sẽ làm suy giảm khủng khiếp trong trường hợp này.

Answer 3

tin vui là, có CSS only solution. tin xấu là, không có bất kỳ sự hỗ trợ lớn nào cho nó trong existing browsers. nếu nó được thực hiện, nó sẽ trông như thế này:

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

tôi nghĩ rằng bây giờ đặt cược tốt nhất của bạn có lẽ là phía máy chủ như đã đề cập bởi monoxide

Answer 4

Here's a JQuery plugin mà làm cột tự động, và thậm chí có thể thay đổi số cột dựa trên kích thước màn hình.

Tôi chưa tự mình sử dụng, nhưng hãy kiểm tra.

Answer 5

Nếu bạn đang sử dụng Mootools, bạn có thể xem MooColumns.

Answer 6

Điều này rất khó đạt được trong HTML/CSS/JS vì một lý do (mặc dù tôi chắc chắn là có thể).

Báo chí sử dụng nhiều cột để giảm độ rộng của dòng giúp văn bản dễ đọc hơn. Điều này là tốt trên giấy bởi vì khi bạn hoàn thành một cột bạn lật mắt của bạn lên đến đầu của tiếp theo.

Trên web, chúng tôi sử dụng cuộn để cho phép văn bản tiếp tục vượt quá giới hạn của màn hình do đó không cần cột.

Answer 7

Điều này được hỗ trợ trong phần mở rộng CSS duy nhất của Mozilla: -moz-column-count.Xem: https://developer.mozilla.org/en/CSS3_Columns