css响应页

Question

这是我对响应式设计的第一次尝试，我无法完全理解。如第一张截图所示，塔形图像与div重叠，我不确定我做错了什么。图片在这里：http://postimg.org/image/l9ax77rhz/

容器的宽度是1170px，我想在屏幕尺寸低于该点时触发图像和文本的缩放。图像在这里：http://postimg.org/image/n420djzlj/然后降到760以下，这些部分开始重叠。我基本上想要修复重叠并让图像首先显示在小屏幕上，标题和文字如下。

任何人都可以向我解释如何做到这一点或我做错了什么？下面是Html和css

<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;
}

Floats会将元素从文档流中分离出来，并将它们浮动到ALL元素的左侧。此修复程序强制容器遵守浮动的边界。

更简洁的解决方法是：

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

如果您希望图像调整大小，请尝试以下操作：

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