CSS: Buộc văn bản để bọc (HOẶC xác định chiều rộng phần tử bởi chỉ một trong số các con của nó)

Được rồi, đây là một điều kỳ lạ đối với tôi. Dưới đây là các phần tử HTML Tôi đang làm việc với:CSS: Buộc văn bản để bọc (HOẶC xác định chiều rộng phần tử bởi chỉ một trong số các con của nó)

LOLZ http://www.ubuntu-pics.de/bild/14571/screenshot_030_0O2o3D.png

Một bức ảnh với chú thích. Lý tưởng nhất, tôi muốn nó trông như thế này, thông qua CSS tinh khiết:

alt text http://www.ubuntu-pics.de/bild/14572/screenshot_031_mp84u7.png

Chiều rộng của phần tử cha của hình ảnh cần phải phụ thuộc vào kích thước của hình ảnh.

Tôi có thể thay đổi đánh dấu tất cả những gì tôi cần. (Văn bản hiện không nằm trong div riêng của nó, nhưng nó có thể là cần thiết.) Có cách nào trong CSS để thực hiện điều này không? Tôi có ấn tượng rằng tôi cần "ép" văn bản để bọc càng nhiều càng tốt (điều này dường như không thể đạt được), hoặc làm cho chiều rộng của toàn bộ phần tử phụ thuộc vào một phần tử và bỏ qua phần tử kia (mà tôi chưa bao giờ nghe trước đây).

Có phải là có cách nào thực sự không? Hay tôi cần sử dụng Javascript ma thuật thay thế? (Các giải pháp JS là khá đơn giản, nhưng khá lame ...)

Nguồn

2009-05-18 Matchu

Kiểm tra điều này great article về cách xử lý hình ảnh có chú thích tốt nhất.

Cá nhân đây là một trong những trường hợp mà bạn phải hút nó lên và đi với công trình đó.

Nguồn

2009-05-18 17:27:52

Làm cho vùng chứa một bảng với bố trí bảng: cố định và đưa hình ảnh ở hàng trên cùng. Bạn cũng có thể làm điều này với CSS thuần túy bằng cách sử dụng display: table- * properties (và thư viện IE7-js cho tương thích IE6).

Bố cục bảng: cố định là làm cho thuật toán vẽ bảng khóa chiều rộng của mỗi cột bảng khi chiều rộng của ô đầu tiên trong cột đó được biết. Chú thích sẽ không có chỗ nào để mở rộng, vì vậy nó sẽ bao bọc với chiều rộng của hình ảnh (ô đầu tiên).

Nguồn

2009-05-18 17:12:33 SpliFF

Đang cố gắng những gì bạn đang mô tả; phải làm điều gì đó sai.

hello world

chào các bạn thế nào?

vì mã mẫu dường như hiển thị bảng như tôi thường thấy - được đặt theo cột rộng nhất của nó. Bất cứ điều gì khác tôi cần phải xác định? – Matchu

Bố cục bảng có vẻ của nó: cố định không thành công khi độ rộng bảng là tự động. Tôi đã đưa ra một giải pháp tốt hơn mặc dù nó hoạt động (xem câu trả lời khác của tôi). – SpliFF

Câu trả lời table sẽ hoạt động. Dễ dàng. Tôi không thể khuyến khích sử dụng nhưng tính dễ sử dụng của nó không có giá trị. Tôi sẽ đề nghị sử dụng thuộc tính CSS clip:, nhưng tôi không thể làm cho nó hoạt động trên máy cục bộ của mình (vì một lý do nào đó, mặc dù nó làm cho example ở mức cssplay.co.uk hoàn hảo).

Nhược điểm của việc này là nó có thể chỉ hoạt động nếu bạn xác định chiều rộng cố định cho các vùng chứa. Tôi chắc chắn phải có một cách, mặc dù. Tôi sẽ tiếp tục tìm kiếm.

Nguồn

2009-05-18 17:25:32

Được rồi, có vẻ như không có giải pháp đơn giản nào mà tôi có thể rút ra. Cảm ơn vì đã giúp tôi làm việc đó :)

Tôi nghĩ rằng, với cách tôi sẽ lưu trữ những hình ảnh đó, truy cập chiều rộng sẽ không liên quan đến tính toán lại không đổi. Tôi chỉ có thể sử dụng ma thuật phía máy chủ đó.

Cảm ơn!

Nguồn

2009-05-18 22:11:41 Matchu

Dưới đây là một giải pháp mà có lẽ không làm việc cho bạn mặc dù nó không tạo ra cách bố trí mà bạn yêu cầu:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 

<head> 
<style> 
div.a {float: left; 
     position:relative;} 

div.b { 
     position: absolute; 
     top: 100%; 
     left: 0; 
     right: 0; 
     text-align: center; 
     background-color:gray;} 

</style> 
</head> 

<body> 

<div class="a"> 
<img src="http://stackoverflow.com/content/img/so/logo.png" alt=""> 
<div class="b">Caption text Caption text Caption text Caption text Caption text </div> 
</div> 

</body> 
</html>

Bạn thấy lý do tại sao nó lại không đạt yêu cầu nếu bạn đặt một số nội dung dưới div a. Nó sẽ chồng chéo với chú thích, bởi vì chú thích hoàn toàn được định vị không mở rộng div cha theo chiều dọc.Nó vẫn có thể làm việc cho bạn nếu bạn có đủ không gian màu trắng bên dưới anyway hoặc bạn sẵn sàng để dự trữ nó.

Nguồn

2009-05-18 22:43:12

Tôi đã đưa ra giải pháp làm việc và khá sạch sẽ.

Giải pháp sử dụng bảng (hoặc div có hiển thị: bảng nếu bạn muốn) và thêm cột thứ hai để "đẩy" ô đầu tiên vào không gian tối thiểu mà thực sự cần. Bảng có thể được đặt thành chiều rộng 1px để ngăn nó phát triển trên trang. Tôi đã đặt cùng một bản demo để hiển thị này trong hành động:

http://test.dev.arc.net.au/caption-layout.html

Tested và làm việc trong IE8, Firefox và Safari/Win

Nguồn

2009-05-19 04:18:46 SpliFF

CSS: Buộc văn bản để bọc (HOẶC xác định chiều rộng phần tử bởi chỉ một trong số các con của nó)

Trả lời

Các vấn đề liên quan