Question

我有以下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跳转到下一行。我希望所有图像都能在一行中显示出来。这可能吗？

Answer 1

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

Answer 2

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

#thumbs {min-width: 880px;}

宽度来自8 x 100px宽图像，每个图像有10px填充（左侧5px +右侧5px）。

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

如果窗口的宽度低于810px，那么这个说法是什么，然后将这个样式应用于元素。为何选择810px？基本上是安全的。

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

我希望这对你有所帮助。

图像溢出到下一行

3 个答案: