2011-09-07 128 views
0

我正在設計一個流體佈局,並且正在考慮正確的方法來編碼佈局..Below是我正在思考的結構;關於流體佈局的問題

<body> 
<div id=container> 
<div id=col1></div> 
<div id=col2></div> 
</div> 
</body> 

對於CSS,我想編碼的容器爲{寬度:90%;保證金:0汽車;溢出:隱藏}

對於2周的cols,他們會飄然留下一些%寬度..

正如你所看到的,因爲我希望有一個流體佈局,我沒有使用任何地方像素值..

我的其他要求;

1它應該根據視口自動進行調整,例如,在桌面或iPad上查看相同的HTML頁面(某種程度上,手機)應該根據視口進行比例調整。

2它可以在大多數桌面瀏覽器和iPad上兼容,未來可以輕鬆擴展以用於其他平板電腦..

3頁面應該出現中心對齊(不知道是否有將iPad上的這種足夠的空間)

Pleasepoint你可能會認爲可以通過上述結構或CSS引起的任何問題..

請建議我的HTML和CSS代碼(特別是容器)編碼正確的..我有點全面瞭解這個權利,因爲相同的情況將被應用到將近500 + htmls ...所以woukd不想在稍後階段進入任何類型的重大問題..

請建議儘可能多的ideas..I是開放給所有的人..

謝謝。

回答

0

你可以做到這一點很容易在它是靈活的條款:

(我已經離開因爲我現在很懶惰的樣式內聯的樣式!)

<div id="container" style="width:90%; margin:0 auto; overflow:hidden"> 
     <div id="col1" style="float:left; width:50%; background:#f90">COLUMN1</div> 
     <div id="col2" style="float:left; width:50%; background:#f00">COLUMN2</div> 
    </div> 

容器上的90%寬度爲視口的90%。這些列將是計算出的90%寬度的50%,無論可能如何。

我會用masterpages或相似的,所以,如果你確實需要改變周圍的事物,你就必須將其應用在每個HTML頁面:)

也不過列將流體內容可以決定的最小寬度 - 例如如果一列中的圖像寬度爲500px,那麼在調整大小時該列的最小寬度將爲500px,並且可能會導致您遇到問題。總之,您需要考慮您將擁有該網站的內容類型以及這可能會如何影響佈局。