Có cách nào để thay đổi thứ tự của HTML DIV khi chỉ sử dụng CSS không?

Tôi phải tạo kiểu cho trang web tạo tiêu đề DIV ở đầu trang (chiều rộng 100%), DIV điều hướng (chiều rộng 25%) xuất hiện ở phía bên trái DƯỚI ĐỀ DIV, với DIV bán hàng (75% chiều rộng), xuất hiện ở phía bên phải của DIV điều hướng, với DIV sản phẩm (chiều rộng 100%) bên dưới DIV bán hàng.

Với chân trang DIV ở dưới cùng bên dưới tất cả các DIV khác trên trang, chiều rộng 100%.

<body> 
    <div id="wrapper"> 
     <div id="nav"></div> 
     <div id="header"></div> 
     <div id="sales"></div> 
     <div id="products"></div> 
     <div id="footer"></div> 
    </div> 
</body>

Có thể thực hiện điều này mà không thay đổi thứ tự logic của DIV HTML và chỉ sử dụng định vị CSS, nổi, v.v ... không?

Nguồn

2012-11-23 NotedThat

Vâng, đúng vậy. Bạn đã thử bất cứ điều gì? Chúng tôi không muốn làm công việc của bạn. – looper

Bạn có thể đăng mã HTML mà bạn tham chiếu không? –

Bạn đã thử sử dụng vị trí chưa? một ví dụ tốt về khả năng css là [css zen garden] (http://www.csszengarden.com/). – Eric

Sử dụng thuộc tính vị trí cố định và đặt các giá trị thuộc tính hàng đầu.

Nguồn

2012-11-23 12:50:37 SaidbakR

Điều này phụ thuộc rất nhiều vào cấu trúc ban đầu của trang của bạn. Lựa chọn duy nhất bạn có thể thực sự là float các div bằng cách áp dụng float: right hoặc float: để các phần liên quan kết hợp với các quy tắc css khác.

Vị trí sử dụng: * chỉ áp dụng trong các trường hợp rất hạn chế và tôi nghi ngờ rằng chỉ một mình là đủ để phù hợp với yêu cầu của bạn.

Nguồn

2012-11-23 12:50:43

Tôi biết rằng điều này không trả lời câu hỏi, nhưng tôi đoán nó sẽ có liên quan để thông báo rằng lý do tại sao rất khó để đạt được là vì đây là một thực hành không tốt.

Để tránh một số vấn đề với thứ tự lấy nét, SEO hoặc thiết bị đặc biệt (máy in, trình đọc màn hình, ...): "nội dung nên được sắp xếp theo chuỗi có ý nghĩa".

Chỉ cần có một cái nhìn tại địa chỉ: C27: Making the DOM order match the visual order

Nguồn

2012-11-23 13:01:49

Nếu bạn có thể sửa chiều cao tiêu đề, sau đó nó khá tầm thường, chỉ cần sử dụng các mục: lợi nhuận tuyệt đối hay tiêu cực đối với # header:

#wrapper {positioN:relative;padding-top:100px;} 
#header {position:absolute;top:0;width:100%;height:100px;} 
#nav {display:inline-block;width:25%;} 
#sales {display:inline-block;width:75%;} 
#products {margin-left:25%;} 
#footer {}

http://jsfiddle.net/FZTj7/1/

Và những khối nội tuyến này có thể được chuyển sang phao để nhận #nav để đi xuống phía trên cùng của khối sản phẩm:

#wrapper {positioN:relative;margin:20px;padding-top:100px;} 
#header {position:absolute;top:0;width:100%;height:100px;} 
#nav {float:left;width:25%;} 
#sales {float:left;width:75%;} 
#products {margin-left:25%;} 
#footer {clear:left;}

http://jsfiddle.net/FZTj7/2/

Nguồn

2012-11-23 13:20:14 gkond

Sử dụng css position thuộc tính nên điều đầu tiên cần thử (screencast).

Nếu bao giờ CSS không đủ để đạt được thiết kế của bạn, một khả năng khác là sắp xếp lại các div trong cây dom bằng cách sử dụng javascript. Ví dụ: JQuery có người trợ giúp thao tác với các nút DOM.

Đây là những thực tiễn tốt trong mọi trường hợp và sau đó nên tránh, nhưng nếu bạn không thể thay đổi nguồn đó là tất cả những gì bạn còn lại.

Edit:

Trong trường hợp bạn sử dụng javascript, bạn có thể phải tải lại css sau khi divs được theo thứ tự đúng. Nạp lại css cũng có thể đạt được using javascript.

Nguồn

2012-11-23 13:20:22 Eric

Có cách nào để thay đổi thứ tự của HTML DIV khi chỉ sử dụng CSS không?

Trả lời

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