關於流體佈局的問題

我正在設計一個流體佈局，並且正在考慮正確的方法來編碼佈局..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是開放給所有的人..

謝謝。

來源

2011-09-07 testndtv

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

（我已經離開因爲我現在很懶惰的樣式內聯的樣式！）

<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，並且可能會導致您遇到問題。總之，您需要考慮您將擁有該網站的內容類型以及這可能會如何影響佈局。

來源

2011-09-07 17:07:01 Stryder

關於流體佈局的問題

回答

相關問題