如何用像素水平分割網頁？

Question

我想分我的網頁水平在2份，我的顯示器佈局是1410 X 752，如果我寫這樣

.left{ 
width:210px; 
} 
.right{ 
width:1200px; 
} 

CSS代碼，它不會在其他顯示器上正確工作，還當我放大/縮小瀏覽器頁面結構將完全失序我的意思是左邊的DIV向下移動，它會在右邊的DIV下面！ 我知道我必須使用％，但是當放大/縮小瀏覽器滾動條沒有出現時，請檢查this address以查看我說的內容。我該怎麼辦 ？

謝謝。

Answer 1

首先，你不告訴你的div去任何地方。他們只是堆疊在一起。

但是，您的確有正確的入門和方法，但應該修改以適應當前的最佳做法。讓我詳細說明......

爲了讓你的代碼工作，你需要添加一個float屬性更改代碼這樣：

.left{ 
float: left; 
width:210px; 
} 
.right{ 
float: left; /* could also put "right" here as a value */ 
width:1200px; 
} 

現在隨着中說...這將產生相同的結果更好的選擇是這樣的：

.left{ 
display: inline-block; 
width:210px; 
} 
.right{ 
display: inline-block; 
width:1200px; 
} 

讓我們更進一步......雖然這將「工作」，但在其他人的屏幕上看起來會很糟糕。如果我的分辨率是1280x1024，與您的分辨率不同，該怎麼辦？我必須滾動到右側才能看到您的網站。這將鼓勵人們離開您的網站。我們雖然可以解決這個問題...

.left{ 
display: inline-block; 
width: 20%; 
} 
.right{ 
display: inline-block; 
width: 80%; 
} 

現在，無論您的div有多大你的瀏覽器窗口占據屏幕的右側的80％，並在屏幕左側的20％ 。 注意這將取決於一個好reset.css由於元素的寬度默認情況下不包括任何填充，邊距或邊框空間。如果添加填充或邊距或邊框，上述方法將會中斷。爲了解決這個問題，有幾個選擇。您可以將百分比值用於填充和邊距，但如果添加邊框則會中斷。

常見的解決方法是將此屬性添加到您的CSS：

.left{ 
display: inline-block; 
width: 20%; 
box-sizing: border-box; 
} 
.right{ 
display: inline-block; 
width: 80%; 
box-sizing: border-box; 
} 

這將解決上面提到的任何填充或保證金空間問題，但你還是要考慮的空白。讓你想兩者之間的5％排水溝，那麼你需要這個代碼的說：

.left{ 
display: inline-block; 
width: 20%; 
box-sizing: border-box; 
margin-right: 5%; 
} 
.right{ 
display: inline-block; 
width: 75%; 
box-sizing: border-box; 
} 

注意我是如何減去5％右欄中納入的空白。如果你把它加起來20 + 5 = 25 25 + 75 = 100％100％意味着它有效，如果它超過100％就會中斷。

有關其他閱讀方面的一些研究（谷歌）響應式佈局/網頁設計。

對float屬性信息 - >http://www.w3.org/wiki/CSS/Properties/float 信息上顯示屬性 - >http://www.w3.org/wiki/CSS/Properties/display 信息上箱集束性 - >http://www.w3.org/TR/css3-ui/#box-sizing

一個很好的資源，以確定瀏覽器的兼容性是http://caniuse.com/

Answer 2

你應該使用%而不是px這裏是一個簡單的例子。

如果使用1200 1410顯示器，然後我們用數學的%相對到達那個寬度

（1200 * 100）/ 1410 = 85％（或多或少...權答案將是85.71428571428571％，但真的沒關係）。

HTML

<div class="left"></div> 
<div class="right"></div> 

CSS

 
.left { 
    float: left; 
    width: 15%; 
    background: green; 
    height: 300px; 
} 
.right { 
    float: left; 
    width: 85%; 
    background: blue; 
    height: 300px; 
} 

Live example.

Answer 3

正如大家說的，你應該使用比例，導致你的窗口瀏覽器將不會做的大小你的碎石n，除非它全屏設置。
然後滾動條可能會出現。
如果您一起管理少於100％的小百分比（從百分比下降到像素，可以添加額外像素），百分比安靜。

型動物的方法來建立ypour佈局可以幫助使用像素爲單位：

顯示：表細胞： 你需要設置的像素的最小尺寸，並設置別人100％收縮小一到它的大小。

float：
在第一個元素上設置浮點數和寬度。第二個元素可以保留在沒有大小和溢出的流中：hidden;留下浮動元素並留下所有空間。

如果你需要小提琴來獲得這個想法，請問。