Làm cách nào để đẩy tiêu đề cùng với một phần của vùng chứa?

Question

Tôi đã có một số HTML:

<div id="thing"> 
    <div id="contentheader"> 
    <h3>Header</h3> 
    </div> 
    <div id="contentcontainer"> 
    <div id="image"> 
     <img alt="balt" src="imagesrc"> 
    </div> 
    <div id="body"> 
     <p>hegl gegl</p> 
    </div> 
    </div> 
</div> 

tôi cần phải đẩy h3 trong 'contentheader' xuống bên cạnh hình ảnh trong 'contentcontainer' trong khi có phần nội dung ngồi bên cạnh nó. Mọi thứ đều có chiều rộng thay đổi để lưu hình ảnh.

Có lẽ một hình ảnh sẽ chứng minh tốt hơn:

Như bạn có thể thấy, tương ứng với màu xám với 'điều', xanh lá cây với 'contentcontainer' và xanh với 'contentheader'.

Chỉnh sửa HTML sẽ là một rắc rối lớn. Tôi cũng không thể làm gì khác ngoài chiều rộng cố định hình ảnh. Có thể làm điều đó chỉ với CSS? (Thật tuyệt vời khi có thể làm điều đó với phao nổi và các công cụ nhưng tôi không biết nếu nó có thể làm được)

Answer 1

Câu trả lời của Ba mươi trong phần bình luận đã giải quyết được vấn đề của tôi.

Answer 2

Tôi không nghĩ rằng bạn sẽ tìm thấy một giải pháp hoàn hảo với CSS. Bạn có thể sử dụng định vị nhưng có thể bạn sẽ gặp sự cố nếu bạn có một tiêu đề dài chạy nhiều hơn một dòng.

Nếu bạn đang mở để sử dụng javascript, đoạn mã không theo khuôn khổ sau sẽ hoạt động.

// Add the header inside the container div just before the body 
containerDiv = document.getElementById('contentcontainer'); 
headerDiv = document.getElementById('contentheader'); 
bodyDiv = document.getElementById('body'); 
containerDiv.insertBefore(headerDiv, bodyDiv); 

Bạn có thể tạo lại mã này bằng cách đánh dấu một lớp, sử dụng jQuery hoặc một khung javascript khác.

Answer 3

Chắc chắn, heres Css cho một thiết lập thô sơ:

http://jsfiddle.net/Nkapr/

hỏi nếu bạn có thắc mắc.

Answer 4

Vấn đề ở đây là cấu trúc HTML, nó không được viết thực sự với mục tiêu của bạn trong tâm trí (đó là một con số thấp!)

Nếu tất cả các bạn sau khi được đẩy container H3 'contentheader' xuống phù hợp với phần còn lại của nội dung bên trong 'contentcontainer', bạn có thể đặt một lề trên tiêu cực về 'contentcontainer' để kéo nó lên trên, và sau đó thêm một lợi nhuận hàng đầu tích cực cho các phần tử trong 'contentcontainer' mà cần phải đi xuống (trong trường hợp này ' hình ảnh ') tạo ấn tượng rằng phần h3 thực sự nằm trong phần còn lại của nội dung. Đó là một chút của một hack nhưng nó có thể làm các trick nếu bạn không thể thay đổi HTML.