Cột và hình ảnh CSS3

Question

Ví dụ của tôi ở đây,

Hiển thị hình ảnh ở giữa các cột được tạo CSS3. Tôi cần văn bản trong cột ở bên phải của hình ảnh để bao quanh hình ảnh để hình ảnh không xuất hiện trước hình ảnh. Điều này để hiểu biết của tôi là không thể làm được trong css hiện tại.

Có ai đó có cách KHÔNG BẮT BUỘC để đạt được những gì tôi đang tìm kiếm không?

Tôi rất muốn đạt được điều này nhìn đây,

mà không có tiêu đề và misc thứ nằm ở phía trên bên trái của khóa học. Ý tưởng sẽ là cho phép thêm hình ảnh vào bất kỳ đâu trong đánh dấu và có hình ảnh chính xác.

Tôi không quan tâm đến hỗ trợ trình duyệt tại thời điểm này, vì vậy - mọi giải pháp đều tuyệt vời!

Cảm ơn trước ....

Erik

Answer 1

Nếu không thực hiện hacks JavaScript, tôi không tin rằng có bất kỳ cách CSS tinh khiết nào để thực hiện việc này. Có thuộc tính span-column, được hỗ trợ bởi Opera (hiện không nằm trong một bản dựng công khai), nhưng nó chỉ có hai giá trị; không và tất cả. Thông số kỹ thuật hiện không cho phép bạn chỉ định số lượng cột, sẽ rất hữu ích. Đó là điều tôi muốn thấy.

Answer 2

Có lẽ tài sản khoảng cột có thể giúp đỡ nếu bạn tạo một container bổ sung cho các hình ảnh và thiết lập độ rộng cột nhịp với chiều rộng tích lũy của tuyến giữa, cột.

Bạn cũng có thể làm cho cột giữa lớn hơn và loại bỏ nhu cầu cho cột khác, do đó, văn bản và hình ảnh sẽ được căn chỉnh độc đáo, nhưng ở bước này, nó được xem xét thiết kế.

http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns

Answer 3

Thay vì xác định số lượng các cột bạn có thể xác định kích thước của chúng để điều chỉnh kích thước của hình ảnh. Hoặc bạn có thể xác định kích thước cho mỗi cột, sau đó bạn thêm bộ chọn css trên hình ảnh để làm cho chúng tự động thay đổi kích thước tùy thuộc vào độ rộng của cột.

Một cái gì đó như thế .column { cột: 12em; }

.column img { chiều rộng: 10em; }

Answer 4

Knock out thuộc tính height và width img - chúng không cần thiết - và sử dụng CSS max-width:100%;

Có một số vấn đề tương thích ngược (đặc biệt là với IE), nhưng họ có thể được cắm với JS. Phương pháp này là tương lai.

Một bài báo có liên quan hữu ích với sự tham khảo:

http://www.ldexterldesign.co.uk/2010/10/99-css-problems-but-liquid-aint-one/

nhất,

Answer 5

Đây không phải là câu trả lời chính xác cho câu hỏi của bạn, nhưng ít nhất có khả năng để bọc văn bản xung quanh hình ảnh bên trong một cột. Kiểm tra "Ví dụ X" từ here.