獲取內容以清除響應式圖像

我在身體外部有一個響應式圖像，代碼如下所示。它填滿了屏幕的上半部分，並且響應很快，但是我希望下面的所有內容都能在調整大小時保留在圖像下面，但沒有任何工作 - 而不是清除它剛剛位於其頂部的圖像。任何想法或替代方法，我可以嘗試？獲取內容以清除響應式圖像

的HTML：

</head> 
<img src="/portfolio/images/me.jpg" class="ri"> 
<body> 
    <header> 
     <div class="contain"> 
      <a href="/"><img src="/portfolio/images/logo.png" alt="Logo" width="200" height="200"></a> 
     </div> 
    </header> 
     <div class="contain"> 
      <nav> 
       <ul> 
        <li><a href="/contact">Contact</a></li> 
        <li><a href="/work">Work</a></li> 
        <li><a href="/details">Details</a></li> 
       </ul> 
      </nav> 
     </div>

的CSS：

.contain { 
    width: 980px; 
    margin: 0 auto; 
} 

img.ri { 
    position: absolute; 
    max-width: 100%; 
    min-width: 980px; 
    top: 0%; 
    left: 0%; 
    border-radius: 1px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.9); 
    z-index: -200; 

} 

     body { 

    .lift { 
    height: 80px; 
    } 

    header {

來源

2013-05-02 user2344148

這會做你想要的東西，如果你使用的彩車，而不是絕對的位置;你的形象也不應該脫離身體。

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;} 
.clearfix { 
display: inline-block;} 
* html .clearfix {height: 1%;} 
.clearfix {display: block;}

只是在你的img標籤爲CLASS = 「clearfix」添加clearfix：

爲例

代碼是這樣的

.contain { 
    width: 980px; 
    margin: 0 auto; 
    float:left; 
} 

img.ri { 
    float:left; 
    max-width: 100%; 
    min-width: 980px; 
    top: 0%; 
    left: 0%; 
    border-radius: 1px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.9); 
    z-index: -200; 

}

來源

2013-05-02 18:04:48

你可以嘗試使用這種見http://jsfiddle.net/BnCQp/

來源

2013-05-02 18:10:58 Alan

獲取內容以清除響應式圖像

回答

相關問題