CSS盒佈局打得不好

我想設計一個CSS和HTML網站，但我有一些問題使其響應。 http://finfeeder.x10host.com/CSS盒佈局打得不好

下面是想什麼我它看起來像在移動和桌面時的照片。

從本質上講，隨着顯示器變得越來越小，這些照片應該變得越來越小，留在同一個地方，直到它變得和一定的規模，完全爲移動設備而改變。相反，它只是越來越小，更多的錯位...

在它的核心我知道我不明白CSS佈局如何工作，但W3schools只是沒有得到我的愚蠢自己的觀點。

<!DOCTYPE html> 
<html> 
<head> 
<style> 

div.main { 
position:absolute; 
z-index:-1; 
left:0; 
top:0; 
width:100%; 
} 

div.buttons { 
    position: absolute; 
    left: 330px; 
    top: 550px; 
    z-index: 0; 
} 

</style> 
</head> 
<body> 

<div class="main"> 
    <img src='https://xo2.x10hosting.com:2083/cpsess6981183432/viewer/home%2ffinfeede%2fpublic_html%2fimages/desktop_betta.jpg' style='width:100%' alt='[]' /> 
</div> 
<div class="buttons"> 
<a href="http://facebook.com"> 
<img src='http://i.imgur.com/dhFsqcW.gif' style='width:15%' style='height:15%' /> 
</a> 
<a href="http://pinterest.com"> 
<img src='http://i.imgur.com/qatEe7q.gif' style='width:15%' style='height:15%' /> 
</a> 
<a href="http://instagram.com"> 
<img src='http://i.imgur.com/IoRiRiD.gif' style='width:15%' style='height:15%' /> 
</a> 
<a href="http://twitter.com"> 
<img src='http://i.imgur.com/eqsUM0m.gif' style='width:15%' style='height:15%' /> 
</a> 
<a href="http://kickstarter.com"> 
<img src='https://xo2.x10hosting.com:2083/cpsess6981183432/viewer/home%2ffinfeede%2fpublic_html%2fimages/kickbutton.gif' style='width:100%' alt='[]' /> 
</a> 

</div> 
</body> 
</html>

請參閱我的回覆鏈接到什麼網站應該看起來像。謝謝你，親切！

來源

2015-12-04 UkiyoWeee

這是桌面設計。 https://xo2.x10hosting.com:2083/cpsess6981183432/viewer/home%2ffinfeede%2fpublic_html%2fimages/betta-splash-red-and-bluefull.jpg – UkiyoWeee

這是移動設計。 https://xo2.x10hosting.com:2083/cpsess6981183432/viewer/home%2ffinfeede%2fpublic_html%2fimages/betta-splash-red-and-blue-MOBILE.jpg – UkiyoWeee

這些鏈接重定向到登錄頁面。 – TheProWolfPcGames

首先，div本身用硬編碼的絕對位置指定。如果您將其更改爲百分比，則無論屏幕有多窄，它都會保留在屏幕的相同部分。

你也可能使用的max-width和min-width特性可避免元素變得太大或太小。

你也應該確保定義html和身體的寬度和高度視口的100%。這種方式和其中的元素將繼承正確的寬度和高度。

<style> 

html, body { 
height: 100%; 
width: 100%; 
} 

div.main { 
position:absolute; 
z-index:-1; 
left:0; 
top:0; 
width:100%; 
height: 30%; /* This could also be coded with a px, pt, etc */ 
} 

div.buttons { 
position: absolute; 
left: 5%; 
top: 5%; 
width: 90%; 
z-index: 0; 
} 

</style>

由於html，body和div.main均爲100％的視口的寬度，定位div.buttons是從左側的5％和設置它的寬度，以90點％的位置它有5％的任何一方的空間，無論視口有多大或多小。

通常是好做法來定義之類的高度，即使你不認爲你需要，因爲在某些時候另一個元素可以繼承該財產，或者是相對於它定位寬度。

如果您使用Google的Chrome瀏覽器，您可以使用control + shift + i啓用開發人員工具，並預覽您的網頁在各種設備上的顯示效果。

來源

2015-12-04 02:16:07

謝謝先生！你的評論確實有幫助。儘管出於某種原因，我的鏈接不再工作。 – UkiyoWeee

沒關係，發現問題是我的鏈接現在在.main div中，因此他們插入了主索引或某個東西。把魚的圖片放在它自己的帶有z index-1的div中，然後解決它。好極了！ – UkiyoWeee

CSS盒佈局打得不好

回答

相關問題