Bố cục chất lỏng CSS: margin-top dựa trên tỷ lệ phần trăm tăng khi độ rộng của container tăng

Tôi chỉ đang học bố cục chất lỏng CSS & thiết kế đáp ứng và tôi đang cố gắng sử dụng tất cả giá trị phần trăm không có giá trị px trong bố cục.Bố cục chất lỏng CSS: margin-top dựa trên tỷ lệ phần trăm tăng khi độ rộng của container tăng

Cho đến nay có vẻ như nó đang hoạt động, nhưng tại một điểm, tôi thấy điều tôi không ngờ tới. Tôi đang cố gắng để đặt một margin giữa hai div xếp chồng lên nhau theo chiều dọc thay đổi dựa trên chiều cao của container. Tôi hy vọng rằng lề để thay đổi khi tôi thay đổi kích thước cửa sổ theo chiều dọc, nhưng nó cũng phát triển nếu bạn thay đổi kích thước nó theo chiều ngang, mà tôi không muốn. Tôi đang thiếu gì?

Đây là một câu đố. Cảm ơn vì sự giúp đỡ của bạn trước đó.

http://jsfiddle.net/gregir/aP5kz/

Nguồn

2012-05-17 Gregir

đơn vị Viewport cho CSS vw, vh 1vw = 1% chiều rộng khung nhìn 1vh = 1% của chiều cao khung nhìn – atilkan

Trong CSS, tất cả bốn lề: và phần đệm: tỷ lệ phần trăm có liên quan đến chiều rộng ... mặc dù điều đó có vẻ vô nghĩa. Đó chỉ là cách thông số CSS, bạn không thể làm gì với nó.

Bạn có thể làm những gì bạn muốn với 'cũ' (hoặc 'em') thay thế không? Đó là cách tôi thường thấy các giá trị "chất lỏng" cho margin/padding được chỉ định ... và nó có thể ít vấn đề hơn tỷ lệ phần trăm. (Mặc dù tôi không có kinh nghiệm trực tiếp có liên quan, tôi nghi ngờ các biện pháp cực kỳ dài đối với các giá trị phần trăm được tính toán của bạn sẽ giúp bạn thiết lập các vấn đề không tương thích với trình duyệt sau này. tất cả có thể, hoặc đôi khi có thể một hoặc đôi khi có thể là hai chữ số sau dấu thập phân.)

Nếu bạn thực sự muốn một không gian trống rỗng tùy ý chính xác là phần trăm của vật chứa, điều đầu tiên xuất hiện trong đầu tôi là một riêng biệt rỗng < div> với đặc tả CSS "chiều cao: nn%". Hoặc có lẽ một cái gì đó khác bạn đang xác định đã được xử lý các kích thước theo chiều dọc theo cách bạn muốn (vì nó sẽ xuất hiện lề không thực sự làm bất cứ điều gì ở tất cả trên một kích thước theo chiều dọc).

Nguồn

2012-05-17 03:34:12

Cảm ơn, Chuck. Tôi thực sự cần sử dụng các giá trị phần trăm cho lề, vì giao diện tôi xây dựng sẽ biến động rất rộng rãi, từ lớn đến nhỏ, và nếu các phần tử lớn của tôi trở nên rất nhỏ nhưng có một lề 1em giữa chúng, có vẻ lạ. Về các giá trị độ chính xác dài, tôi đã nâng ý tưởng từ A List Apart (http://www.alistapart.com/articles/fluid-images/) và không thực sự lên kế hoạch sử dụng chúng trong sản xuất. Ở mức nào, đề xuất của bạn lại: một div trống sẽ chỉ hoạt động tốt; nó đơn giản/tao nhã, và ước gì tôi cũng nghĩ về nó. Cảm ơn, một lần nữa! – Gregir

http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width –

@Mr. TA - Tôi có thể thấy lý do tại sao spec là như vậy. Nếu tỷ lệ phần trăm trên và dưới được thay đổi tương ứng với _height_, trong khi tỷ lệ lề trái và lề phải tương đối so với _width_, sẽ không có cách nào để xác định lề (và đệm) với tỷ lệ phần trăm, nhưng cũng có chúng _equal_ tất cả xung quanh. (Nó cũng là cơ sở của một hack CSS lạ để duy trì tỷ lệ khung hình của một phần tử.) Đây là những lựa chọn khó khăn; hít một hơi thật sâu trước khi bạn kết luận chúng đơn giản là một "lỗi thiết kế". –

Vâng, đó là bất ngờ và phản trực giác, nhưng nó hoạt động như thiết kế & Tôi không có ý tưởng tại sao nó hoạt động như nó. Xem margin-top percentage does not change when window height decreases

Nguồn

2012-05-17 03:12:44

Weird. Và tôi xin lỗi tôi đã bỏ lỡ điều này trong tìm kiếm Stack của tôi trước đó. Không có ý tưởng làm thế nào để có được xung quanh này, nhưng tôi đoán tôi sẽ tốt hơn có được suy nghĩ của tôi trên nắp. Cảm ơn. – Gregir

Bố cục chất lỏng CSS: margin-top dựa trên tỷ lệ phần trăm tăng khi độ rộng của container tăng

Trả lời

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