chiều rộng tối đa với một phần trăm dường như không hoạt động ở cả IE 8 hoặc Firefox 3. Độ rộng pixel cụ thể hoạt động tốt. Tui bỏ lỡ điều gì vậy?Chiều rộng tối đa CSS với phần trăm
Tôi có biểu mẫu nhập liệu và tôi muốn hiển thị một số văn bản giải thích ở bên phải của nó. Nhưng tôi không muốn các văn bản giải thích để squash hình thức.
Tôi chưa sử dụng chiều rộng tối đa trước đây nhưng dường như đây là giải pháp tuyệt vời. Tôi viết theo phong cách CSS đơn giản này:
div.hint {max-width: 50%; float: right;}
Sau đó, tôi đã viết:
<div class=hint>... hint text</div>
<form action=xxx method=post>
... etc ...
Các div.hint squashes hình thức nặng nề sang bên trái.
Tôi đã thử điều này chỉ với một số văn bản thay vì biểu mẫu. Div.hint chiếm khoảng 95% màn hình, chỉ cho một lề nhỏ ở bên trái, và sau đó văn bản khác được đẩy hoàn toàn bên dưới nó.
Nếu tôi thay đổi chiều rộng tối đa từ phần trăm thành số pixel cố định, nó dường như hoạt động. Nhưng tôi không muốn dựa trên pixel vì tôi không biết kích thước của trình duyệt của người dùng.
Phần trăm không hoạt động với độ rộng tối đa bất chấp những gì tôi đọc trong tài liệu hay tôi thiếu gì đó?
Đáp lại bình luận Seanmonster của: Ở đây, tôi sẽ cung cấp một trang web nhỏ nhưng đầy đủ để minh họa những gì tôi nghĩ nên làm việc nhưng không:
<html><title>Max width test</title>
<style>
.form {max-width: 75%; float: left;}
.hint {max-width: 50%; float: right;}
</style>
<div class=hint>
<p>Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that
all men are created equal. We are now engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated,
can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place
for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. Etc.
</div>
<div class=form>
<table>
<tr><th>Label 1 <td>Value 1
<tr><th>Label 2 <td>Value 2
<tr><th>Label 3 <td>Value 3
</table>
</div>
</html>
Khi tôi mở trang này trong một trình duyệt, tôi nhận được, không phải hai cột, nhưng div "gợi ý" lấy 100% chiều rộng, và bên dưới là div "form" lấy 100% chiều rộng. Nếu tôi thay đổi cả chiều rộng tối đa thành "chiều rộng: 50%", tôi nhận được hai cột như tôi mong đợi. Rõ ràng tôi đang thiếu một cái gì đó về cách chiều rộng tối đa là nghĩa vụ phải làm việc, nhưng ... Tôi không nhận được nó.
Với những thông tin bạn đã đưa ra, vấn đề của bạn không nên tồn tại. Có lẽ bạn có thể cho chúng tôi một liên kết đến một ví dụ để chúng ta có thể thấy nó xảy ra trong tự nhiên. – seanmonstar
Tôi đã mở mã ví dụ của bạn trong FF3.5.3 trên máy Mac và PC và nó hoạt động tốt. Tôi nhận được hành vi bạn đang mô tả trong IE 7, và không có 8 để kiểm tra với. – Emily
@Emily: Tôi chỉ thử ví dụ trên với IE 8 trước khi đăng. Tôi sẽ nói với bạn rằng nó hoạt động với Firefox. Nhưng tôi đã thử các ví dụ tương tự khác không giống với Firefox, vì vậy dường như chúng không hoàn toàn miễn dịch với nguyên nhân gốc rễ ở đây.Trong mọi trường hợp, tôi thực sự muốn một cái gì đó mà làm việc với ít nhất IE 7, IE 8, và Firefox 3, như những người có lẽ là các trình duyệt phổ biến nhất. – Jay