图像溢出到下一行答案

【问题标题】：Image overflow into next line图像溢出到下一行
【发布时间】：2011-07-06 20:05:43
【问题描述】：

我有以下html：

<div id="thumbs">
   ...8 image tags width and height of images 100 x 100px
</div>

相关的CSS是：

#thumbs
    {
        overflow:hidden;    
        float:left; 
        position:relative;
        background-color:white;
        height:100px;
        width:100%;
    }

#thumbs img 
    {       
        padding:5px;    
    }

当我将分辨率降低到最低设置 -800 x 600 时，最后一张图片 -img8 会跳到下一行。我希望所有图像都显示在一行中。这可能吗？

【问题讨论】：

标签： css image overflow

【解决方案1】：

您有 8 张图片，每张图片的宽度为 100 像素。窗口的宽度为 800 像素。每个图像上还有 5 像素的填充，然后使整个结构的宽度为 880 像素。将每个图像大小减小到 90 像素，你应该会很好。如果还有 20-30 像素的滚动，还要考虑滚动条。

【讨论】：

【解决方案2】：

您是否尝试过在容器上设置最小宽度

#thumbs {min-width: 880px;}

宽度来自 8 x 100 像素宽的图片，每个图片有 10 像素的内边距（左 5 像素 + 右 5 像素）。

【讨论】：

【解决方案3】：

看看responsive web design techniques 可能会有所帮助。

您遇到的问题是您试图将 880px 放入 800px 的空间中，这是 800px 的图像，然后为 div 中的每个图像填充 10px 额外的 80。

我会使用的基本解决方案是放入媒体查询，例如

@media screen and (max-width: 810px) {
     #thumbs img {
     padding: 3;
     height:80px;
     width:80px
  }
}

这就是说，如果窗口的宽度低于 810 像素，则将这种样式应用于元素。为什么是 810 像素？基本上是安全的。

为了保持设计的一致性，我们确实需要减小图像大小和填充，您需要根据它们在屏幕上的实际外观来调整这些变量。

【讨论】：