使用CSS ...的主div之外的裝飾是不穩定的？

我試圖在主要內容div 之外做一些裝飾，如果窗口大小很小，它會隱藏起來。使用CSS ...的主div之外的裝飾是不穩定的？

我想了一會兒，想出了以下標記，（你可以複製粘貼並看到它），，這是我現在可以想到的最好的。然而，問題在於，因爲我使用了百分比邊距，所以裝飾在調整大小時會變得不穩定且不穩定，有時甚至會踩在內容div上。

下面的代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <style> 
      body { 
       padding: 0px; 
       margin: 0px; 
       width: 100%; 
       height: 100%; 
       background-color: yellow; 
      } 
      div.content { 
       display: block; 
       width: 958px; 
       height: 400px; 
       background-color: #CCC; 
       margin: 0px auto; 
      } 
      div.wrap { 
       margin: 0px auto; 
       min-width: 958px; 
       max-width: 1058px; 
       overflow: hidden; 
       position: relative; 
       background-image: url(http://www.ephotobay.com/image/ooo-ml.png); 
       background-position: center; 
      } 
      div.left, div.right { 
       background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg); 
       width: 50px; 
       display: block; 
       height: 50px; 
       bottom: 0px; 
       position: absolute; 
      } 
      div.left { 
       right: 479px; 
       margin-right: 50%; 
      } 
      div.right { 
       left: 479px; 
       margin-left: 50%; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="wrap"> 
      <div class="left"></div> 
      <div class="right"></div> 
      <div class="content"> 
       <-- Content 
      </div> 
     </div> 
    </body> 
</html>

所以，你能不能推薦傢伙一些其他的方式，而不使用百分比的利潤周圍，以使其更加靈活..？謝謝！

編輯：

這是谷歌瀏覽器會發生什麼就調整大小：

This is what happens in Google Chrome on resize

來源

2012-05-06 Anonymous

由於瀏覽器必須重新計算基於父母的寬度的邊際變化，這是一種預期的行爲。

如果你想保持集中在屏幕上的內容，而不會最大寬度，最小寬度和利潤率百分比玩耍，也不會有應由.wrap影響的任何元素在文檔流的位置，你可以做這樣的事情：

div.wrap { 
      width: 1058px; 
      overflow: hidden; 
      position: absolute; 
      left: 50%; 
      top: 0; 
      margin-left: -529px; /* 1058/2 * -1 */ 
      background-image: url(http://www.ephotobay.com/image/ooo-ml.png); 
      background-position: center;     
     }

這將在任何情況下水平集中的內容。

希望它有幫助。

來源

2012-05-06 16:16:26 PanterA

謝謝你的一個好主意，我可以在未來試試:) 現在我能夠把兩張圖片放在一個長的圖像中，並且將它與中心位置貼在一起。 – Anonymous

清除您的花車：

<div> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="clear"></div> 
    </div> 
    <style> 
    .clear{clear:both;} 
    </style>

來源

2012-05-06 13:57:56 FiveTools

..它有什麼意義呢？ :) – Anonymous

使用CSS ...的主div之外的裝飾是不穩定的？

回答

相關問題