Bắt trái và phải nổi để chồng lên nhau thay vì ngăn xếp

Question

Đây là dễ dàng hơn để hiển thị hơn giải thích: http://jsfiddle.net/gN4VZ/

Có thể có nội dung phải nổi của tôi (màu xanh) chồng chéo nội dung trái nổi của tôi (màu đỏ) thay vì chồng dưới nó khi hai kết hợp để vượt quá chiều rộng container?

Answer 1

Bạn có thể sử dụng absolute positioning.

Thay vì sử dụng float:rightposition:absolute; right:0; và thay vì sử dụng float:leftposition:absolute; left:0;

Hãy chắc chắn để thiết lập position:relative; trên DIV cha mẹ của bạn để định vị tuyệt đối là liên quan đến container tương ứng của họ thay vì trang.

Answer 2

Sử dụng vị trí tuyệt đối với lớp .box được đặt thành position:relative.

http://jsfiddle.net/gN4VZ/1/

Lưu ý rằng tôi đã phải thiết lập một chiều cao trên mỗi .box để nó wouldnt chồng lên nhau trên/dưới.

CSS mới của bạn sẽ là

.bar { 
    border:solid 1px black; 
    color:white; 
    position:relative; 
    height:40px; 
} 
.clear { 
    clear:both; 
} 
.left-bar { 
    background:red; 
    height:40px; 
    position:absolute; 
    left:0; 
} 
.right-bar { 
    background:blue; 
    position:absolute; 
    right:0; 
    height:40px; 
}​ 

---

theo đề nghị của My Head Hurts, bạn chỉ có thể xác định vị trí một trong những quyền, mà loại bỏ sự cần cho chiều cao trên div bên ngoài.

http://jsfiddle.net/gN4VZ/2/