5
Loại ví dụ kỳ lạ, nhưng ở đây:CSS - Bật "tự động mở rộng" của DIV được định vị hoàn toàn khi nội dung mở rộng vượt ra ngoài thông số chiều rộng/chiều cao
Làm cách nào để có được DIV được định vị hoàn toàn khi chèn nội dung vượt khỏi biên giới của nó? Đây là mã:
<html>
<head>
<style>
* {margin: 0; padding: 0;}
body {white-space: nowrap; text-align: center; color: white; font-size: 2em;}
div#container {position: relative; height: 100px; width: 50px;}
div#a {height: 50px; width: 25px; background-color: red; position: absolute; top: 0; left: 0;}
div#b {height: 50px; width: 25px; background-color: blue; position: absolute; top: 0; right: 0}
div#c {height: 50px; width: 25px; background-color: orange; position: absolute; bottom: 0; left: 0;}
div#d {height: 50px; width: 25px; background-color: purple; position: absolute; bottom: 0; right: 0;}
span#title {position: relative; overflow: visible}
</style>
</head>
<body>
<div id="container">
<div id="a"><span id="title">This is my title</span></div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
</div>
</body>
Trong ví dụ trên, các nội dung trong DIV "a" được ẩn (do sự hạn chế chiều rộng/chiều cao). Nếu chúng ta đặt nó thành "min-height" và "min-width" thì nội dung chỉ nằm "đằng sau" các div khác, nhưng không di chuyển chúng. Làm thế nào tôi có thể thực hiện điều này?
Lưu ý: Tôi đang cố gắng tìm ra điều này, vì tôi cần phải "định vị lại" thứ tự mà DIV được sắp xếp theo HTML (Tôi đang cố gắng tạo mẫu con trong Wordpress). Bất kỳ ví dụ/tài nguyên được đánh giá cao.
Chúc mừng, Sapiensgladio
nếu bạn cần định vị lại thứ tự của các div thực sự thay đổi mọi thứ và bạn nên sử dụng giải pháp jQuery để sắp xếp lại các yếu tố. – BumbleB2na