Css điền vào div với văn bản
|
Mẹo. Nếu bạn thêm chiều cao vào phần tử nhiều cột, bạn có thể kiểm soát cách nội dung lấp đầy các cột. Nội dung có thể được cân bằng hoặc điền tuần tự Đưa ra bản chạy thử ❯ Giá trị mặc định. cân bằng được kế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS3JavaScript. mục tiêu. Phong cách. columnFill="auto" Hãy thử Hỗ trợ trình duyệtCác số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính Các số theo sau -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố Thuộc tính cột-điền50. 010. 052. 0 Cú pháp CSSđiền cột. sự cân bằng. Tự động. ban đầu. thừa kế; Giá trị tài sảnGiá trị Mô tảDemobalanceGiá trị mặc định. Lấp đầy mỗi cột với cùng một lượng nội dung, nhưng sẽ không cho phép các cột cao hơn chiều cao (vì vậy, các cột có thể ngắn hơn chiều cao do trình duyệt phân bổ nội dung đồng đều theo chiều ngang) Bản trình diễn ❯tự động điền từng cột cho đến khi đạt . Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế Ban đầu có nghĩa là một công cụ đơn giản để nhóm các thành phần trang, thẻ DIV mang đến cho người thiết kế thêm tính linh hoạt và kiểm soát bố cục khi nó được kết hợp với các thuộc tính Biểu định kiểu xếp tầng (CSS)
Nhà thiết kế sử dụng DIV để tạo bố cục trang phức tạp mà không cần sử dụng bảng. Thật không may, khi bố cục trở nên phức tạp hơn, các vấn đề về khả năng tương thích của trình duyệt sẽ tăng lên Các vấn đề về khả năng tương thích với CHIỀU CAO VÀ CHIỀU RỘNG Hãy xem xét một trong những cách bố trí đơn giản nhất xung quanh. hai cột đặt cạnh nhau. Một cái chứa menu điều hướng và cái kia chứa nội dung trang. Đây có vẻ là ứng cử viên lý tưởng để chuyển đổi từ bố cục dựa trên bảng sang bố cục CSS Nó có ý nghĩa. cả DIV và bảng đều có thể được lồng vào nhau, có các thuộc tính HEIGHT và WIDTH được đặt, chứa các đường viền, v.v. Tuy nhiên, có một sự khác biệt lớn trong hành vi. Nếu bạn hiểu vấn đề này, bạn sẽ tiết kiệm cho mình rất nhiều thời gian gỡ lỗi bực bội. Ghi lại điều này Các ô của bảng kéo dài để vừa với nội dung được đặt bên trong chúng, nhưng DIV có thể không Giống như rất nhiều vấn đề thiết kế gây phiền nhiễu, vấn đề cơ bản không nằm ở chính các quy tắc CSS, mà là cách các trình duyệt chọn diễn giải chúng Các trình duyệt Mozilla, Netscape và Opera hiểu các giá trị này là các phép đo chính xác và không cho phép các giá trị HEIGHT hoặc WIDTH của DIV vượt quá những gì bạn chỉ định. Vì vậy, nếu bạn đặt các thuộc tính HEIGHT và WIDTH cho DIV, sau đó chèn hình ảnh hoặc văn bản chiếm nhiều dung lượng hơn, màn hình sẽ trở thành một mớ hỗn độn Internet Explorer dễ tha thứ hơn nhiều. Nó coi các giá trị HEIGHT và WIDTH là các giá trị tối thiểu và mở rộng DIV để chứa tất cả nội dung bạn muốn - giống như một ô của bảng Ai đúng? . Có vẻ như Explorer đang giúp ích cho bạn, nhưng hãy xem xét kết quả nếu bạn đang sử dụng định vị tuyệt đối để đặt tất cả các thành phần trang. Nếu một DIV hiển thị lớn hơn bạn mong đợi, nội dung quan trọng khác có thể bị ẩn khỏi chế độ xem So sánh màn hình Explorer và Netscape Nhìn vào mã HTML bên dưới. Đặc biệt chú ý đến các giá trị HEIGHT và WIDTH trên các lớp và trên các hình ảnh bên trong phần HEAD Bên trong phần CƠ THỂ Lưu ý rằng quy tắc CSS đặt RỘNG của DIV điều hướng thành 125px, nhưng chúng tôi đã đặt một hình ảnh bên trong DIV có chiều rộng 163px. Cũng lưu ý các giá trị HEIGHT trên hai DIV. Cả hai đều được đặt thành 75% cửa sổ trình duyệt, nhưng DIV điều hướng có thể cần nhiều chỗ hơn thế Đây là cách nó hiển thị trong Explorer 6. 0. DIV điều hướng mở rộng sang bên phải để chứa toàn bộ hình ảnh logo Happy Puppy và các mục menu. Lưu ý cách menu DIV cao hơn DIV nội dung Trong Netscape7. 1, toàn bộ logo Happy Puppy xuất hiện, nhưng chiều rộng DIV điều hướng không kéo dài để phù hợp với nó. Đó là lý do tại sao phần lớn nội dung văn bản DIV ghi đè lên hình ảnh logo. Chiều cao của cả hai DIV được cố định ở mức 75%, do đó, nội dung bổ sung sẽ hết cả hai vào khoảng trắng bên dưới Không có trang nào trông tuyệt vời như vậy, nhưng phiên bản Explorer ít nhất có thể đọc được Giải pháp DIV lồng nhau cho Explorer Phiên bản Explorer dù đẹp hơn nhưng vẫn chưa hoàn hảo. May mắn thay, rất dễ khắc phục - mặc dù đây là giải pháp chỉ dành cho Explorer Đặt cả hai DIV vào một DIV vùng chứa được đặt thành 100% chiều cao của trang và đặt cả hai DIVS bên trong thành 100%. Chúng sẽ lấp đầy DIV vùng chứa và chiều cao của cả hai sẽ bằng nhau Thay đổi thuộc tính HEIGHT của cả hai DIV thành 100% và thêm lớp kiểu này vào quy tắc CSS của bạn. . thùng chứa {chiều cao. 100%} và sau đó áp dụng nó cho vùng chứa DIV trong phần CƠ THỂ Đây là kết quả trong Explorer Màn hình trong Netscape không thay đổi khi bạn thực hiện việc này, nhưng phiên bản Explorer gần với những gì bạn mong đợi. Nếu bạn chắc chắn rằng tất cả (hoặc ít nhất là đại đa số) khách truy cập của bạn đang sử dụng Explorer, điều này sẽ giải quyết vấn đề của bạn. Đó là một giải pháp bố trí tuyệt vời, không có bảng Tài sản tràn Nếu bạn cần một giải pháp đa trình duyệt hơn, có lẽ thuộc tính OVERFLOW là dành cho bạn. Tiêu chuẩn W3C mô tả tình huống như thế này "Nói chung, nội dung của hộp khối được giới hạn ở các cạnh nội dung của hộp. Trong một số trường hợp nhất định, một hộp có thể bị tràn, nghĩa là nội dung của nó nằm một phần hoặc toàn bộ bên ngoài hộp. " Thuộc tính OVERFLOW có thể có một trong bốn giá trị khác nhau
Việc thêm thuộc tính OVERFLOW vào cả hai DIV sẽ giữ nội dung bên trong các DIV nhưng cũng tạo ra cảm giác "khung" có thể không làm hài lòng cả nhà thiết kế và khách truy cập Khi chúng tôi thêm "tràn. cuộn" quy tắc CSS sang vùng chứa DIV, chúng tôi nhận được màn hình này trong Netscape 7. 1 và Nhà thám hiểm Lưu ý thanh cuộn bên phải. Nội dung của phần vùng chứa sẽ cuộn trong khi điều hướng vẫn tĩnh. Nó mang lại cảm giác "đóng khung", nhưng có thể giúp giữ chân khách truy cập nếu bạn có một số trang quá dài |
