CSS max-width with percent
[英]CSS max-width with percent
問題描述
帶有百分比的max-width似乎在IE 8或Firefox 3中都不起作用。特定的像素寬度可以正常工作。 我錯過了什么嗎？
我有一個輸入表單，我想在其右側顯示一些解釋性文本。 但我不希望解釋性文本壓縮表格。
我之前沒有使用過max-width，但它似乎是一個很好的解決方案。 我寫了這個簡單的CSS樣式：
div.hint {max-width: 50%; float: right;}
然后我寫道：
<div class=hint>... hint text</div>
<form action=xxx method=post>
... etc ...
div.hint嚴重地向左壓縮形式。
我用一些文本而不是表單嘗試了這個。 div.hint大約占屏幕的95％，只是左邊有一個小的邊距，然后另一個文本被完全推到它下面。
如果我將最大寬度從百分比更改為固定數量的像素，它似乎工作。 但我不想基於像素，因為我不知道用戶瀏覽器的尺寸。
盡管我在文檔中讀到了，或者我遺漏了什么東西，百分比是否與最大寬度無關？
回應Seanmonster的評論：在這里，我將給出一個簡單但完整的網頁，說明我認為應該起作用但不會：
<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>
當我在瀏覽器中打開此頁面時，我得到的不是兩列，而是“提示”div占用寬度的100％，而“form”div占用寬度的100％。 如果我將最大寬度更改為“寬度：50％”，我會得到兩列，如我所料。 顯然我錯過了一些關於max-width應該如何工作的東西，但是......我不明白。
3 個解決方案
解決方案1
5 2009-10-04 21:54:28
最大寬度在FF3和IE8中的百分比完全正常。 但是，百分比基於父寬度。 不是周圍的孩子。
解決方案2
3 已采納 2009-10-13 20:42:04
在多種情況下，IE8上的max-width是錯誤的。 這是一個眾所周知的問題。
你可以在這里找到一篇文章。 http://edskes.net/ie8overflowandexpandingboxbugs.htm
你需要三件事來觸發這個bug - maxwidth，scrollbars和float
解決方案3
1 2009-10-11 23:11:32
如果你要將div.hint浮動並形成左側並使它們都具有50％的最大寬度，則它們不應該相互擠壓。
<div>
<div class="form" style="float:left; max-width:50%">
<form></form>
</div>
<div class="hint" style="float:left; max-width:50%">
</div>
</div>
如何設置最大寬度百分比和像素？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.