Ngăn chia bằng cách sử dụng CSS3 Thay đổi kích thước thuộc tính

Question

Tôi đã cố gắng thay đổi kích thước cửa sổ chia nhỏ bằng cách sử dụng thuộc tính CSS3.

Đây là mã:

<style> 

div.left, div.right {float: left; outline: solid 1px #ccc; 
resize: both; overflow: auto;} 

div.left {width: 20%} 

div.right {width: 80%} 

</style> 

<div class="left"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
</div> 

<div class="right"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
</div> 

Vấn đề là nếu tôi thay đổi kích thước div trái, div bên phải sẽ không co lại và hạnh phúc của nó đẩy lên phía dưới. Có cách nào khác mà tôi có thể làm cho ngăn chia mà không sử dụng javascript?

Giả sử, nếu không thể thực hiện được bằng CSS3 và thực sự cần sử dụng javascript, javascript sẽ tối thiểu nếu có thể.

Cảm ơn bạn.

Answer 1

Tôi không chắc chắn lý do tại sao bạn mong muốn yếu tố khác thay đổi kích thước - dường như không có bất kỳ mối quan hệ nào giữa chúng trong đánh dấu của bạn?

Giả sử bạn đang nhắm mục tiêu WebKit và phát triển Firefox ảnh chụp nhanh, điều này sẽ làm hầu hết những gì bạn quan tâm:

1. Tạo một yếu tố wrapper và đặt nó vào display: box (sử dụng tiền tố nhà cung cấp thích hợp)
2. Set một trong những yếu tố của bạn được kích thước cố định nhưng thay đổi kích thước, nếu không mọi thứ chỉ trở nên quá khó hiểu đối với trình duyệt
3. Đặt khác là box-flex: 1 (một lần nữa với appropriate vendor prefixes)

Here's a working example, hoạt động tốt hơn trong Chrome so với Firefox - nếu bạn cần bất kỳ trình duyệt nào khác được hỗ trợ thì bạn sẽ cần một giải pháp JavaScript.

--edit:

Chỉ cần có một phiếu bầu tán thành về câu trả lời cũ này, ví dụ cũ không làm việc với phiên bản mới của flexbox, vì vậy here's a new example. Trong các bước trên, hãy thay thế display: box bằng display: flex và box-flex: 1 bằng flex: 1 1 0;.