使用css的圖像佈局

我想在我的網站的主頁上連續放置三個圖像。這在我的機器上顯示爲我想要的，但是在其他機器上嘗試時，佈局將切換爲一行中的2個圖像，然後在新行中切換到第三個圖像。繼承人代碼：使用css的圖像佈局

<body> 
<div id="container"> 
    <div id="header"> 
     <h1> 
      <!--<a href="#"><img src="tracylogo7.jpg" alt="Millington and Hope" /></a> --> 
      <a href="#"><img src="tracylogoup6.jpg" alt="Millington and Hope" /></a> 
     </h1> 
     <h2> 
      <!--<a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a> --> 
     </h2> 
    </div> 
    <ul id="nav"> 
     <li><a href="index.html">Home</a></li><!-- 
     --><li><a href="stock.html">Stock</a></li><!-- 
     --><li><a href="events.html">Events</a></li><!-- 
     --><li><a href="contact.html">Contact</a></li> 
    </ul> 
    <div id="box"> 
      <a href="#"><img src="home4.jpg" alt="Image 1" /></a> 

      <a href="#"><img src="home_mir.jpg" alt="Image 2" /></a> 

      <a href="#"><img src="home_urn.jpg" alt="Image 3" /></a> 
    </div> 
    <div id="box2"> 
     <a href="#"><img src="tracylogosmall.jpg" alt="Logo" /></a> 
    </div> 
    <div id="footer"> 
     <p class="client">Tel: 07858740&nbsp;&nbsp;&nbsp;&nbsp;E-mail: [email protected]</p> 

    </div> 
</div>  
</body> 
<style type="text/css"> 

html,body 
{ 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

body 
{ 
    background:rgb(171,163,144); 
    text-align: center; 
    min-width: 600px; 
} 

#container 
{ 
    margin:0 auto; 
    background:rgb(171, 163, 144); 
    width:80%; 

}  


#header 
{ 
    padding: 0px; 
    color: white; 
    width:100%; 
    text-align:center; 
} 


#footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:25px; 
    width:100%; 
    background:rgb(151,143,124); 
    border-top:solid 1px white; 
} 

.client 
{ 
    color:white; 
    margin:3px auto; 
    text-indent:1cm; 
    text-align:left; 
} 

#sold 
{ 
    color: red; 
} 

#box 
{ 
    position:relative; 
    margin:0 auto; 
    width:100%; 
    height:200px; 
    margin-top:100px; 
} 
#box img 
{ 
    margin:0 auto; 
    border:solid 1px white; 
    margin: 10px; 
} 

#box2 
{ 
    position:relative; 
    margin-top:260px; 
    width: 100%; 
} 

#box2 img 
{ 
    margin:0 auto; 
    opacity:0.5; 
    filter:alpha(opacity=50); 

}

任何人都可以幫助我解決這個問題嗎？

來源

2012-07-27 user1356791

當你不指定它們時，我們應該如何糾正你的css？ – arkascha 2012-07-27 14:50:32

我的css包含在html之後。它不是爲你而出現的阿卡斯卡？ – user1356791 2012-07-27 14:56:05

你在說「盒子」裏的圖像嗎？ – 2012-07-27 14:56:13

水平浮動的問題在於它依賴於頁面（或瀏覽器窗口）的寬度。假設你有圖像的寬度和高度，請將包裝的高度設置爲最高圖像的高度，並使寬度等於樹圖像寬度的總和。這將防止頁面/窗口大小影響外觀。

但是，正如arkascha所說，沒有查看您的CSS，我無法重新創建問題，並且必須假定它是一個大小問題。

來源

2012-07-27 14:55:06

我的CSS包含在html之後。它不適合你們嗎？ – user1356791 2012-07-27 14:56:24

不好意思，把它放在上面是更好的編碼風格。我甚至沒有看到它。我將堅持我的解決方案。推理：你已經將你的寬度設置爲100％（意思是整個頁面寬度），如果頁面（或者甚至包裝器）太窄，你就沒有好處 – 2012-07-27 15:01:12

你有框定義爲相對，它最終意味着它考慮到瀏覽器的大小。你最好的辦法是把所有事情都確定爲絕對位置，這樣他們總是處在那個位置，不管怎樣。如果圖像變得太大並且超出瀏覽器的尺寸，它會引起滾動條等，但是它將允許所有3幅圖像並排放置在所有窗口尺寸中。

來源

2012-07-27 14:59:31 Gyhth

將div定義爲絕對值會使div不居中，但向右移動？ – user1356791 2012-07-27 15:11:07

您必須使用該元素的其他CSS設置，因爲它現在不會引用自身周圍的元素進行定位，因此您看到的偏移量與其原來的偏移量相比較。如果我回想起來，它也不會以自身周圍的其他元素爲中心，因爲它本身存在於自己的世界中，所以諸如將它與中心對齊的事情不會起作用以及給它絕對的X和Y座標存在於。 – Gyhth 2012-07-27 15:24:28

使用css的圖像佈局

回答

相關問題