爲什麼不按照我期望的那樣使用最小寬度和最大寬度？

我正在嘗試使用最小寬度和最大寬度來調整CSS頁面佈局。爲了簡化這個問題，我做了這個測試頁面。我試着在Firefox和Chrome的最新版本中得到相同的結果。爲什麼不按照我期望的那樣使用最小寬度和最大寬度？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Testing min-width and max-width</title> 
    <style type="text/css"> 
     div{float: left; max-width: 400px; min-width: 200px;} 
     div.a{background: orange;} 
     div.b{background: gray;} 
    </style> 
    </head> 
    <body> 
    <div class="a"> 
     (Giant block of filler text here) 
    </div> 
    <div class="b"> 
     (Giant block of filler text here) 
    </div> 
    </body> 
</html>

這是我期望發生：

隨着最大化瀏覽器的div並排而坐，每個400像素寬：最大寬度
收縮的瀏覽器窗口，它們都縮小到200px：它們的最小寬度
進一步縮小瀏覽器對它們沒有影響

下面是實際情況，在第2步開始：

收縮的瀏覽器窗口，只要他們不能在他們的最大寬度坐並排側，第二格下降到低於第一
進一步縮小瀏覽器使他們得到窄，小到我可以使窗口

因此，這裏的是我的問題：

max-width如果元素在佈局中跳下來的速度低於其最大寬度，那麼這是什麼意思？
min-width如果元素會比在瀏覽器窗口不斷縮小的情況下變得更窄，那麼它的意思是什麼？
有什麼辦法可以實現我想要的：讓這些元素並排坐在一起，愉快地縮小，直到它們各自達到200px，然後只有調整佈局，以便第二個下降？

當然還有......

我在做什麼錯？

來源

2010-05-14 Nathan Long

他們「下降」的原因是由於他們的父元素的大小在變化（在這種情況下爲body）。在它們周圍放置一個包裝，寬度爲400像素或更多，並且可以讓它們並排坐在一起。

來源

2010-05-14 20:53:14 Amber

在他們周圍包裹一個div，並給了它一個規則：'width：900px;'。現在他們不會並肩坐在一起。試圖添加一個左浮動的情況下，它正在崩潰。不用找了。 – 2010-05-14 21:06:03

我認爲（這只是從我自己的個人經驗），最大寬度適用於div內的內容。因此，如果div內只有1個單詞，則寬度將是200px，但如果div中有300個單詞，則寬度將爲400px寬。

我認爲有辦法做你想做的事情。這篇文章可能涉及到它：

http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/

好運。

來源

2010-05-14 20:56:39 codedude

要回答至少位：

min-width真的是什麼時候瀏覽器應該顯示的頁面水平滾動條。

雖然實驗花車只有真正運作良好時，他們有一個width集，所以我會使用父母div用最小和最大寬度設置，並添加width: 50%孩子的div。這解決了所有問題，除了divs改變佈局。爲此，我可能會參考JavaScript。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Testing min-width and max-width</title> 
    <style type="text/css"> 
     div.cont {max-width: 700px; min-width: 400px;} 
     div.a, div.b {float: left; width: 50%; } 
     div.a{background: orange;} 
     div.b{background: gray;} 
    </style> 
    </head> 
    <body> 
     <div class="cont"> 
    <div class="a"> 
     Morbi malesuada nulla nec purus convallis consequat... 
    </div> 
    <div class="b"> 
     Vivamus id mollis quam. Morbi ac commodo nulla... 
    </div> 
    </div> 
    </body> 
</html>

來源

2010-05-14 21:00:31

爲什麼不按照我期望的那樣使用最小寬度和最大寬度？

回答

相關問題