Question

在我的网站上，我想在页面的宽度上放置几张图片。当我在我的笔记本电脑上（分辨率：1366x768）时，彼此相邻的是7张图像。当我在我的智能手机上测试它时，彼此相邻的是5张图像，当我在分辨率为1920x1080的屏幕上进行测试时，有7张并且有一些空间打开。我想要做的是让中间5始终显示在屏幕上（因为这是我的菜单）并始终在屏幕中间。当分辨率发生变化时，两侧会出现更多或更少的图像。结论：在智能手机上时：5张照片。在笔记本电脑上（正常屏幕）：7张图片。在高清屏幕上：9张图片。并且总是5个中间位于同一位置。这就是我所拥有的：

HTML：

<div id="head-container">
<!--<div id="head-film"></div>-->
    <div id="head-roll">
    <div id="head-table">
        <table>
            <tr id="headTable">
            <td>
                <img src="./files/img/frame1.png"/>
            </td>
            <td>
                <img src="./files/img/frame2.png"/>
            </td>
            <td>
                <img src="./files/img/frame3.png"/>
            </td>
            <td>
                <img src="./files/img/frame4.png"/>
            </td>
            <td>
                <img src="./files/img/frame5.png"/>
            </td>
            <td>
                <img src="./files/img/frame6.png"/>
            </td>
            <td>
                <img src="./files/img/frame7.png"/>-->
            </td>
            </tr>
        </table>
        </div>
    </div>
    </div>

的CSS：

div#head-table{
z-index:2;
position:absolute;
}

我试图将表格分成两个表格，并让它们各自占据50％的屏幕，保证金为50％，如下所示：

div#head-table-left{
width:50%;
margin-right:50%;
}

div#head-table-right{
width:50%;
margin-left:50%;
}

但是当分辨率改变时，左表将粘在屏幕的左侧。有办法解决这个问题吗？还是完全不同的东西？谢谢！

Answer 1

如果你将它们全部保存在一个容器中（顺便说一句，我不确定某个表是否适用于实际不是表格数据的内容：对于菜单，<ul>设置为<li> s到float:left或display: inline-block是一个更好的HTML结构。但回到你的问题......）：）

我建议将所有图像保存在同一个块中，并在屏幕变小时使用2个媒体查询隐藏某些元素。

@media screen and (max-width: 960px) {
  #headTable td:nth-child(1),
  #headTable td:nth-last-child(1) {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  #headTable td:nth-child(2),
  #headTable td:nth-last-child(2) {
    display: none;
  }
}

我只是使用600px和960px作为估计值：将它们更改为适合您设计的任何屏幕宽度。快速警告：CSS nth-child选择器和媒体查询都可以在IE 9+和所有其他浏览器上运行。在较旧的浏览器上，如果你必须支持较低的浏览器，你需要一个后备解决方案 - 但仅适用于宽屏IE7 /宽屏IE8，这两者都非常罕见。

尽管分辨率，图像固定位置

1 个答案: