Số liệu hợp lý. CSS: Bao bọc các phần tử. Hình ảnh trên sân

Sự khác biệt lớn:

• Khi gán các thuộc tính chung áp dụng cho tất cả danh sách trên trang cùng một lúc, các điều khiển được tạo trên cơ sở các thuộc tính và danh sách này sẽ bị thay đổi. Kết quả là các menu và menu điều hướng của trang web biến mất.
• Trong trường hợp lớp cá nhân, như (class=”list”) - nó sẽ phải được chèn thủ công vào mã html của danh sách được yêu cầu.
• “Ý nghĩa vàng” sẽ giúp ích - tìm lớp khối văn bản trang trong mẫu và chỉ gán thuộc tính gói ảnh cho danh sách của nó. Sau đó, trong văn bản của trang tin tức (tin nhắn, bình luận), các danh sách sẽ bao quanh các hình ảnh và hình ảnh một cách đẹp mắt và phần còn lại của trang web sẽ không thay đổi.

Thuộc tính được chỉ định cho thành phần danh sách (

,
). Điều này có thể hiểu được, vì bằng cách “kéo” điểm đánh dấu vào trong danh sách và thụt lề để hiển thị nó (padding-left: 1.9em;), chúng tôi đã giảm chiều rộng của danh sách xuống 1,9em một cách trực quan. Một chi tiết nhỏ như thế này có thể được sửa thành công trong CSS, trong thuộc tính danh sách (thẻ
,
). Đáng chú ý là việc thay đổi thụt đầu dòng cho danh sách không hề ảnh hưởng đến luồng của nó xung quanh hình.

Trước khi bạn bắt đầu làm việc với một danh sách về chủ đề này, bạn nên tạo cho nó một đường viền (thuộc tính border:2px Solid #000;). Điều này sẽ cho phép bạn thấy rõ vị trí của các bản tin “trước” và “sau” chỉnh sửa.



Bạn có thể đạt được hiệu ứng bao bọc thú vị xung quanh hình ảnh bằng cách sử dụng thuộc tính CSS cho danh sách. tràn: ẩn;. Trong trường hợp này, việc gói sẽ được thực hiện bình thường nhưng danh sách sẽ bị thiếu các điểm đánh dấu (dấu đầu dòng). Đôi khi, đây chính xác là hiệu quả mà bạn muốn đạt được. Mã ví dụ để gói một danh sách xung quanh một bức ảnh, bằng một lệnh đơn giản tràn: ẩn;

Mã CSS cho các mục danh sách

li (tràn: ẩn;)

Mã CSS cho toàn bộ danh sách
(trên toàn cầu, cho toàn bộ trang):
ul,ol (tràn: ẩn;)

Những biến thái tương tự với tràn: ẩn; lấy cảm hứng từ mã ngược dòng. Trên thực tế, hiệu quả tương tự có thể đạt được chỉ bằng cách kiểu danh sách: không có; Thuộc tính CSS này loại bỏ các điểm đánh dấu danh sách mà không cần cắt xén. Ngoài ra, thuộc tính hoạt động trong mọi tình huống, trong khi tràn: ẩn; - chỉ kết hợp với danh sách kiểu-vị trí: bên ngoài;- khi danh sách nằm ngoài văn bản danh sách.

Tất cả các phần tử HTML trên một trang web được sắp xếp theo một luồng chung, từ trên xuống dưới (đối với các phần tử khối) và từ trái sang phải (đối với các phần tử nội tuyến). Cách hiển thị này không hiệu quả lắm nhưng nhờ CSS có thể thay đổi thiết kế cho tốt hơn.

Yếu tố nổi

Khi bạn xác định một phần tử nổi, bạn cần đặt nó trong mã ngay bên dưới phần tử bạn muốn nó nổi bên dưới; tất cả nội dung khác được đặt trong mã bên dưới phần tử nổi sẽ chảy xung quanh nó trên trang web. Chúng ta hãy xem xét kỹ hơn cách trình duyệt tải các phần tử nổi và nội dung khác trên trang web.

Đầu tiên, trình duyệt tải các phần tử lên trang theo thứ tự thông thường, di chuyển từ trên xuống dưới, khi gặp phần tử nổi thì đặt nó vào phía được chỉ định. Trình duyệt loại trừ phần tử này khỏi luồng chung và kết quả là nó "nổi" trên trang.

Vì phần tử nổi đã bị loại khỏi luồng chung nên các phần tử khối còn lại nằm trong mã sau khi được tải lên trang như thể phần tử này không có ở đó. Lưu ý rằng các phần tử khối được đặt bên dưới phần tử nổi, điều này là do phần tử nổi không còn là một phần của luồng tổng thể.



Nếu bạn nhìn kỹ vào hình, bạn sẽ thấy rằng, không giống như các phần tử khối, khi đặt nội tuyến hoặc văn bản thô nằm bên trong phần tử khối, ranh giới của phần tử nổi được tính đến, vì vậy phần tử nội tuyến và dòng văn bản xung quanh nó.

Hãy nhớ rằng bạn có thể đặt nhiều phần tử nổi trong một hàng nếu chiều rộng cho phép phần tử cha.

Lưu ý: các phần tử có giá trị tuyệt đối và định vị cố định làm ngơ tài sản nổi.

Bằng cách sử dụng Thuộc tính CSS float Hình ảnh được làm nổi ở phía bên trái. Văn bản nằm trong mã HTML bên dưới hình ảnh sẽ bao quanh hình ảnh dọc theo cạnh phải và cạnh dưới.

Thử "

Để tạo khoảng trống giữa hình ảnh và văn bản xung quanh nó, bạn cần thêm phần đệm bên ngoài vào hình ảnh. Vì hình ảnh được bù vào cạnh trái của phần tử gốc, nên chỉ cần thêm phần đệm vào bên phải và phía dưới để di chuyển văn bản ra xa nó một chút:

Img ( float: left; lề: 0 10px 10px 0; ) Hãy thử »

Hủy gói

Đôi khi bạn muốn hiển thị một phần tử để nó không bị ảnh hưởng bởi các phần tử nổi phía trước nó. Ví dụ: phần tử như vậy có thể là chân trang, trong mọi trường hợp phải được hiển thị bên dưới tất cả các phần tử khác của trang. Nếu trang của bạn có thứ hạng cao thanh bên nằm ở cạnh trái của trang web, phần chân trang có thể nhô lên và xuất hiện ở bên phải trang web. Vì vậy, thay vì các trang được trình bày, nội dung chân trang sẽ xuất hiện ở cùng cấp độ với menu bên. Vấn đề nàyĐiều này được giải quyết bằng cách sử dụng thuộc tính clear, thuộc tính này cho trình duyệt biết rằng phần tử đang được tạo kiểu không được bao quanh phần tử nổi.

Đối với CSS thuộc tính rõ ràng bạn có thể đặt một trong các giá trị:

• trái - các phần tử nổi không được phép ở phía bên trái.
• phải - phần tử nổi không được phép bên phải.
• cả hai - các yếu tố nổi đều bị cấm ở cả hai bên.
• không có - cho phép các phần tử nổi ở cả hai bên.


Thuộc tính clear chỉ định rằng các phần tử nổi không được phép ở phía bên phải. Văn bản nằm bên dưới hình ảnh sẽ không bao quanh cạnh trái của hình ảnh.

Khá thường xuyên, người thiết kế bố cục được giao một số nhiệm vụ không chuẩn. Mục tiêu của chúng tôi là đưa ra giải pháp hợp lý và đúng đắn nhất. Hôm nay chúng ta sẽ nói về các tính năng của văn bản bao quanh một hình ảnh.

Xây dựng vấn đề

Viết một bài báo cho bạn nguồn thông tin hoặc một blog thường sẽ đi kèm với các hình ảnh xen kẽ trong quá trình trình bày văn bản. Bởi vì robot tìm kiếm Tôi luôn tôn trọng sự hiện diện của hình ảnh trên trang web và người dùng sẽ hài lòng hơn với văn bản có hình ảnh tươi sáng. Do đó cần phải cài đặt cách đặc biệtđịnh dạng sẽ đảm bảo sự tương tác đẹp mắt giữa văn bản và hình ảnh.

Hãy xem xét trường hợp không cần phải ngắt dòng văn bản. Hơn nữa, tôi đưa ra một tùy chọn phổ quát - trong trường hợp không có hình ảnh, văn bản sẽ bị kéo dài trên toàn bộ chiều rộng của khối (không phải tất cả các bài viết của bạn đều có hình ảnh minh họa kèm theo). Chiều rộng của khối văn bản không được cố định chặt chẽ. Dưới đây là khối của chúng ta sẽ trông như thế nào.



Giải pháp đúng

Để thực hiện nhiệm vụ, chúng ta tạo hai khối: một khối cho hình ảnh, khối thứ hai dành cho văn bản. Tính đến thực tế là có thể có các phần tử khác bên dưới hình ảnh, chúng tôi tạo một vùng chứa riêng cho hình ảnh, nếu không thì điều này là không bắt buộc, bạn chỉ cần gán lớp được yêu cầu cho thẻ hình ảnh.

HTML


< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >Khối văn bản

Hiển thị nội dòng; )

Cái này giải pháp chuẩn cho văn bản sẽ bao quanh khối có hình ảnh. Nó sẽ trông giống thế này:



Sẽ khá hợp lý nếu đề xuất gán các thuộc tính của một đối tượng nổi cho văn bản. Nếu không đặt giá trị chiều rộng của vật thể ta có được hình ảnh sau



Để tránh hiệu ứng này, bạn chỉ cần chỉ định chiều rộng của khối văn bản, nhưng điều này không đáp ứng được điều kiện nhiệm vụ của chúng tôi.

Tùy chọn tốt tiếp theo sẽ là sử dụng thuộc tính lề trái. Vì đối với một blog, rất có thể, tất cả các hình ảnh trong khối này sẽ có kích thước thống nhất, nên về nguyên tắc, giải pháp này không tệ và hiệu quả. Tuy nhiên, đây chỉ là trương hợp đặc biệt, vì nếu không có hình ảnh trong bài viết thì sẽ chỉ có một dải trống ở bên trái. Điều này không phù hợp với chúng tôi. Chúng tôi đang tìm kiếm một giải pháp phổ quát!

Và giải pháp đúng đắn nhất, như thường lệ, là giải pháp đơn giản nhất. Để đạt được định dạng mong muốn của khối văn bản, bạn cần truy cập thuộc tính tràn với giá trị ẩn giấu. Đừng quên Internet Explorer độc đáo. Như thường lệ, anh ấy khoe khoang và cần được chú ý nhiều hơn! Để ông già của chúng ta hoạt động bình thường thì chúng ta thêm thuộc tính float vào khối văn bản (sau khi truy cập thuộc tính tràn sẽ không cần xác định chiều rộng cố định).

Như vậy chúng ta đã đi đến quyết định đúng đắn, điều này sẽ dẫn đến hiệu ứng được chỉ ra trong hình ở phần phụ mô tả các điều kiện thực hiện nhiệm vụ của chúng ta.

Hình ảnh ( float: left; /*wrap */ lề: 10px; /*lề Cho vẻ đẹp */ Hiển thị nội dòng; /* dành cho IE6, để lề trái không gấp đôi */) . văn bản( tràn: ẩn; float: trái; )

Nhược điểm của phương pháp và phương pháp thay thế

Mặc dù tính đơn giản và linh hoạt của phương pháp, bao gồm việc sử dụng tràn:ẩn, có một nhược điểm. Thuộc tính sẽ không còn thực hiện các chức năng của nó nếu các phần tử thả xuống được sử dụng trong phần văn bản.

Trong trường hợp này, bạn sẽ cần một giải pháp thay thế để định cấu hình định dạng mong muốn. Kỹ thuật này sẽ dựa trên chức năng của sự kết hợp hiển thị:ô bảng;. Giải pháp này cũng hiệu quả nhưng kém hơn một chút về tính đơn giản so với phương pháp đầu tiên. Khi gọi phương thức này, bạn cũng cần thiết lập bố cục để hoạt động trong môi trường Internet Explorer

Hình ảnh ( float: left; /* thiết lập gói */ lề: 10px; /* thụt lề cho đẹp */ Hiển thị nội dòng; /* dành cho IE6, để lề trái không gấp đôi */) . văn bản( hiển thị: ô bảng; thu phóng: 1 ; /* Cẩn thận! Chuỗi không hợp lệ */ }

Và giải pháp này có những đặc điểm riêng cần được tính đến khi bố trí. Nếu phần văn bản đủ ngắn thì khối tiếp theo sẽ được hiển thị ở bên phải khối có lớp văn bản. Để tránh điều này, bạn cần đặt khối văn bản và hình ảnh vào một vùng chứa riêng.

Nó hoạt động trong những trình duyệt nào?

6.0+	5.0+	9.5+	4.0+	3.0+	-	-