我想是這樣的：http://www.freeimagehosting.net/image.php?11b1fcb689.png 絕望的形象定位問題

編輯：新增的什麼，我試圖做一個更全面的瞭解。我可以使用絕對定位使其看起來很正確，但是當窗口尺寸太小時，內容會從沒有水平滾動條的頁面滑落。這就是爲什麼我想使用div的相對定位。再次感謝。 http://www.freeimagehosting.net/image.php?75c33eaf6e.png

我只知道如何使用絕對定位的div要做到這一點，但是當窗口太小，不能絕對的div內容將滑落的頁面。本質上，圖像垂直居中並在屏幕左半部分對齊。如果窗口太小，我寧願有一個水平滾動條，而不是丟失圖像的一部分。

任何幫助將不勝感激！

麥克

<!DOCTYPE html> 
<html> 
<head> 
<title>Title</title> 

<style> 

body { 
    margin: 0; 
} 
.footer { 
    color: #202054; 
    text-align: left; 
    font-size: 12px; 
    text-decoration: none; 
    margin-left: 20px; 
} 
a { border: 0px; text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; } 
span { text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; } 
a.footer:hover { 
    color: #EE001E; 
    text-decoration: underline; 
} 
</style> 

</head> 
<body> 

<img style="position: absolute; right: 50%; top: 50%; margin-top: -128px;" src="Resources/chart.png" width="432" height="256"/> 

<div style="position: absolute; left: 50%; top: 50%; margin-top: -200px; width: 368px; height: 400px;"> 
    <!-- text content --> 
</div> 

<div style="position: absolute; width: 100%; height: 20px; bottom: 20px;"> 
    <a style="text-decoration: none;" href="http://www.company.com" > 
    <img class="footer" src="Resources/logo.png" alt="company" width="21" height="13"/> 
    </a> 
    <a class="footer" href="#">Terms of Use</a> 
    <a class="footer" href="#">Privacy Policy</a> 
    <span class="footer" style="color: #7E7E7E;">Copyright &#169; 2009 Company Inc. All rights reserved.</span> 
</div> 

</body> 

</html>

來源

2009-07-12 Michael Swarts

它似乎並不真的需要絕對定位，但如果可能的話也請顯示其他內容和網格線。 – xandy 2009-07-12 07:28:03

這個問題似乎是他以前的問題的延續（在這裏找到：tinyurl.com/swarts1，因爲鏈接格式的TinyUrl'd），它可能有助於瞭解問題的歷史。 – 2009-07-12 10:03:09

是的，這是我老問題的延續。我已經添加了代碼，因此無需查看舊帖子。此外，我還鏈接了一個更明確的佈局圖片。有了這些信息，你知道這個佈局是否可行嗎？ – 2009-07-12 19:25:03

它可與任一absolute或relative定位工作，只要將圖像的寬度和高度限定。

更新爲您最近的編輯

問題是，您需要使用相對定位。你也應該有一個圖像和側邊欄div的容器DIV，因爲它們仍然不正確，只有身體作爲父母。

然後，您需要容器div上的最小寬度，設置爲您在較新圖像中說明的最小寬度。這些東西一起會給你你想要的。

請注意，我將張貼的代碼中的側邊欄內容需要不同的邊距。我不確定爲什麼，因爲我對CSS有些生疏，但現在都定位了relative，如果側邊欄內容沒有負邊距，則頂端將與圖像底部對齊。我知道margin-top: -256px會使它與圖像的頂部對齊。然後垂直居中他們你需要加上他們的差異的一半或(256 - 400)/2，所以你增加-72px到-256px餘量再次居中。

下面是對我的作品的代碼：

<html> 
<head> 
<title>Title</title> 

<style> 

body { 
    margin: 0; 
} 

#container { 
    background: #DDD; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    min-width: 900px; 
} 

img#image { 
    position: relative; 
    left: 50%; 
    top: 50%; 
    margin: -128px 0 0 -432px; 
    background: black; 
    display: block; 
} 

div#sidebar { 
    position: relative; 
    left: 50%; 
    top: 50%; 
    margin: -328px 0 0 0; 
    width: 368px; 
    height: 400px; 
    background: grey; 
} 

.footer { 
    color: #202054; 
    text-align: left; 
    font-size: 12px; 
    text-decoration: none; 
    margin-left: 20px; 
} 

a { border: 0px; text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; } 

span { text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; } 

a.footer:hover { 
    color: #EE001E; 
    text-decoration: underline; 
} 
</style> 

</head> 
<body> 

<div id="container"> 

    <img id="image" src="" width="432" height="256"/> 

    <div id="sidebar" style=""> 
     <!-- text content --> 
     content 
    </div> 

</div> 

<div style="position: absolute; width: 100%; height: 20px; bottom: 20px;"> 
    <a style="text-decoration: none;" href="http://www.company.com" > 
    <img class="footer" src="" alt="company" width="21" height="13" /> 
    </a> 
    <a class="footer" href="#">Terms of Use</a> 
    <a class="footer" href="#">Privacy Policy</a> 
    <span class="footer" style="color: #7E7E7E;">Copyright &#169; 2009 Company Inc. All rights reserved.</span> 
</div> 


</body> 

</html>

注意我添加色素來幫我一起的，也是我發現，你必須添加display: block的形象。

希望這會有所幫助。

注意：min-width值是任意的。它只需要大於兩個元素的寬度。您可能要玩，看看寬度的側邊欄開始脫落頁面（裁剪右邊是不可避免的在瀏覽器中）

來源

2009-07-12 08:10:19 jonwd7

我想你可能想是這樣的：

 
<div style="width:50%; height:100%; position:absolute; text-align:right; overflow:auto"> 
<img src='...'> 
</div>

但要中心圖像垂直，你將需要把它放到表中或使用JavaScript。

來源

2009-07-12 08:33:26 Thinker

絕望的形象定位問題

回答

更新爲您最近的編輯

相關問題