css響應頁面上的圖像重疊

Question

這是我對響應式設計的第一次嘗試，我不太清楚。正如在第一個屏幕截圖中看到的塔圖像重疊一個div，我不知道我做錯了什麼。這裏的圖片：http://postimg.org/image/l9ax77rhz/

容器的寬度是1170px，我想觸發圖像和文本的縮放，一旦屏幕尺寸下降到該點以下。圖片在這裏：http://postimg.org/image/n420djzlj/然後降到760以下的部分開始重疊。我基本上想要解決重疊問題，並在下面的標題和文本的小屏幕上顯示圖像。

任何人都可以向我解釋如何做到這一點或我做錯了什麼？ Html and css below

<style> 
    .lenovo-container { 
     width: 1170px; 
     height: 381px; 
     min-width: 858px; 
    } 

    .lenovo-container img { 
     float: left; 
     } 

    @media (max-width:1170px) { 
     img { 

      max-width: 100%; 
      height: auto; 

     } 
     .lenovo-container { 
      max-width: 100% 

    @media (max-width: 858) { 
     .lenovo-container p { 
      display: block; 

     } 
    } 
</style> 
<div class="lenovo-container"> 
    <img class=" wp-image-1498 size-full alignnone" src="wp-content/uploads/2015/06/Rack-server-e1434645252235.jpg" alt="Rack server" width="500" height="381" /> 
    <h2>Rack Servers</h2> 
    <p>Lenovo ThinkServers and System x Rack Servers are Ideal for small to medium-sized business and feature power-efficient designs, segmented workloads, and fit-for-purpose applications.</p> 
    <div class="product-button" style="vertical-align: bottom;"> 
     <div class="button-inner-product"><a href="http://shop.lenovo.com/us/en/systems/servers/racks/" target="_blank">Learn more</a> 
     </div> 
    </div> 

</div> 
<br> 
<div class="aligncenter" style="width: 1170px; display: block; vertical-align: bottom"> 
    <hr /> 
    </div> 

<div class="lenovo-container"> 
<img class="alignnone size-full wp-image-1565" src="wp-content/uploads/2015/06/Lenovo-server-e1434648963684.jpg" alt="Lenovo server" width="500" height="520" /> 
<h2>Tower Servers</h2> 
<p>Lenovo tower servers provide the performance, reliability, and easy-to-use tools to manage your file/print and point-of-sale workloads.</p> 
</div> 

Answer 1

罪魁禍首是float:left。試試這個：

.lenovo-container { 
    width: 1170px; 
    height: 381px; /* If your image is getting cut off, it's too large. 
         Try auto instead or remove this property altogether. */ 
    min-width: 858px; 
    overflow: hidden; 
} 

.lenovo-container img { 
    float: left; 
} 

浮動將打破文件流的元素，並將它們浮動到所有元素的左側。此固定強制容器尊重浮動的邊界。

一個稍微清潔的解決方法是：

.lenovo-container:after { 
    display: table; 
    content: ''; 
    clear: both; 
} 

如果您希望圖像的大小調整爲容器，那麼試試這個：

@media (max-width:1170px) { 
    .lenovo-container img { 
     max-height: 100%; 
    } 
    .lenovo-container { 
     max-width: 100% 
    } 
}