css相對vs固定佈局

Question

H！

我已經瞭解到，在編寫GUI時，特別是如果此GUI要在不同的操作系統上使用，不應該爲程序窗口內的任何圖形元素使用固定位置。這個原則通常在基礎編程課程中教授，因爲GUI在每個不同的操作系統上顯示的方式稍有不同，並且強制固定座標的元素可能會在某些機器上產生尷尬的後果。創建一個沒有固定座標的好看的GUI是沒有問題的，因爲在每個面向對象的API中都有佈局對象（如Java中的GridLayout或BorderLayout）。我目前在一個網頁上工作，我很驚訝地發現，可以在互聯網上閱讀關於CSS和HTML的內容恰恰相反！

我想創建一個看起來像這樣的佈局：http://www.dynamicdrive.com/style/layouts/item/css-fixed-layout-21-fixed-fixed/但是，這和CSS中的許多其他howtos使用固定或絕對座標。是否可以在不指定分區或「面板」的確切位置的情況下重做此佈局？有沒有辦法將這些子面板添加到主容器中，並讓它們在添加了女巫的命令後自動按照給定的模式自行排列？

使用絕對/固定座標真的是個好主意嗎？創建我發佈的佈局的最佳方式是什麼？

在此先感謝！

Answer 1

不是創建一個真正的設計是應該對所有瀏覽器，操作系統，設備和屏幕尺寸的所有用戶的工作，這是更好的遵循Responsive Web Design的原理來實現與同幾個不同的佈局HTML和CSS。

Here's 41 great examples of responsive web design我建議你看看。在任何支持Web瀏覽器的CSS3中打開示例並調整其大小以查看頁面如何響應。

Answer 2

網絡行業對佈局的「流動性」有不同的看法和實踐，顯然您使用的佈局類型取決於您的內容和個人品味。您所描述的內容通常被稱爲「流體」或「液體」佈局，當然也是常見做法之一，特別是現在有更多的人使用各種屏幕尺寸瀏覽網頁。

正如@asbjoournu所提到的，現在已經擴展到「響應式」網頁設計的領域，在那裏你可能完全改變你的佈局，比方說，如果你的網站在手機上瀏覽，桌面屏幕。

幾乎肯定有可能獲得您想要的佈局，但我會先閱讀流體和響應式網頁設計，以便您瞭解需求和可能出現的問題（許多有用的現代技術對於響應良好的佈局具有不同瀏覽器支持，例如特別是在較舊版本的Internet Explorer中）。

Here, for example, I've created a layout similar to the one you linked to，其中不是具有固定尺寸，而是整個內容調整爲窗口的寬度。主要內容總是寬度的80％，而不是固定大小。正如您所描述的，我還添加了一批小「面板」，根據主內容div的寬度重新排列它們，從而填充儘可能多的寬度。

Layout Gala可能是一個有趣的資源給你。這是一種常見的標記，它有四十種不同的風格，展示瞭如何使用相同的源文檔在純CSS中實現各種固定和流暢的佈局，而不是距離您提供的示例數百萬英里。

Answer 3

對於您鏈接的特定佈局，創建它非常簡單，無需設置在大多數主流瀏覽器中都能正常工作和顯示的絕對位置或固定位置。 This example here I made in jsFiddle是一個非常簡單的固定佈局，使用浮動但也給予設置寬度。

你有一個包裝器，它可以容納你所有的內容，並通過設置左右邊距在汽車中央位置放置在窗口中。

您的標題填充了包裝的全部寬度。

左邊和右邊的兩列都設置爲左側浮動，下方有一個明確的修復，所以之後的任何內容都不會嘗試並沿着它浮動。

而您的頁腳以與頁眉相同的方式顯示。

這樣可以很好地用作佈局，但就像使用asbjornu鏈接的示例一樣，一旦開始調整瀏覽器大小，由於包裝的寬度爲800px，因此一旦瀏覽器低於此大小，它就不會調整大小因爲它是固定的。因此內容將被滾動到用戶。對我來說，這不是一個大問題，因爲我知道大多數人不會用一個小窗口瀏覽器查看我的網站，如果他們是那麼他們很可能習慣於不得不滾動，因爲很多網站都是這樣製作的，並且大多數智能手機/平板電腦都會自動調整縮放功能以正確顯示它，所以很多時候它並不是一個大問題。

但是當然有時候需要有響應/流體設計，它只是知道何時何地使用它。

Answer 4

編號看看CSS網格系統 - http://960.gs/是最知名的一個，如果你是新來的CSS有你如何使用它們管西元

但http://www.tinyfluidgrid.com/是我對流體

最愛