css响应页面上的图像重叠
css响应页面上的图像重叠
提问于 2015-06-19 03:35:47
这是我第一次尝试响应式设计，我不能完全理解它。正如在第一个屏幕截图中看到的，塔图像重叠了一个div，我不确定我做错了什么。图片在这里：http://postimg.org/image/l9ax77rhz/
容器的宽度是1170px，我想在屏幕尺寸降到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>回答 1
Stack Overflow用户
发布于 2015-06-19 03:39:59
罪魁祸首是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%
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30924249
复制相关文章
相似问题
腾讯云开发者
