基於html中的屏幕分辨率，我們可以動態地將表格與文本一起擠壓嗎？

Question

我設計了一個分辨率爲1366 * 768的全屏幕網頁。 現在，如果我正在查看我的網頁上的一些其他分辨率所有的div標籤重疊.. 那件事我通過保留我的所有網頁在表中.. 但仍然我得到較低分辨率的滾動.. 我們可以按照分辨率來減少字體和圖像大小。

Answer 1

基於表格的佈局通常是一個非常糟糕的主意。使網頁在不同分辨率下看起來很好的最佳方式是使用帶有百分比寬度屬性的div。一個小例子將是：

CSS：

#main{ 
width: 70%; 
position: absolute; 
left: 25%; 
top:0px; 
} 


#left{ 
position: absolute; 
left: 0px; 
width:20% 
} 
img{ 
width: 100%; 
} 

HTML：

<div id="left"> 
<p> 
This is the left coulmn.<br /> 
This is the left coulmn.<br /> 
<img id="picture1" src="pic.png" /> 
</p> 
</div> 

<div id="main"> 
<p> 
This is the main div with a lot of text. 
This is the main div with a lot of text. 
This is the main div with a lot of text. 
This is the main div with a lot of text. 
This is the main div with a lot of text. 
</p> 
</div> 

[使用浮動的而不是絕對位置也是一種常見的解決方案，要歸檔不同的列] 兩個答案你是關於根據分辨率降低字體大小的問題：這將是可能的，使用JavaScript（獲取分辨率，更改圖像大小d ynamically）。但它會濫用網絡技術 - 所以只需使用CSS百分比屬性即可。如果您在特定情況下需要幫助，請發佈您的基本頁面結構的代碼。另外谷歌的「CSS 2/3列布局」。

編輯：短路的示例代碼+插入img標籤