Question

我正在尝试使用javascript和css构建一个响应式网站，但我不明白为什么因为我是一名新程序员。

这就是网站应该是这样的：

我有9张照片，我想按如下方式显示：

无论窗口是否调整大小，标题图片始终为原始浏览器宽度的100％。
即使调整窗口大小，两张徽标图片也应始终位于其位置。
6张照片必须以2行排列，如果调整窗口大小，您将始终看到所有照片都符合窗口宽度和高度。

这是我到目前为止所做的，但它没有给出我想要的结果。

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <style>
        </style>

        <div style="position:relative">
            <img src="header.png" style="width:100%; position:absolute;">
            <img src="logo1.png" style="left:30px; position:absolute;">
            <img src="logo2.png" alt="" style="right:30px; position:absolute;">
        </div>

        <img src="1.jpg" style="position:relative; top:100px;">
        <img src="2.jpg" style="position:relative; left:30px;">
        <img src="3.jpg" style="position:relative; left:30px;">
        <br>
        <img src="4.jpg" style="position:relative; left:30px;">
        <img src="5.jpg" style="position:relative; left:30px;">
        <img src="6.jpg" style="position:relative;left:30px;">
    </body>
</html>

我应该如何使用Javascript代码（使用window.resize）和CSS定位？

感谢您的帮助。

Answer 1

也许尝试检查框架： Bootstrap， Zurb Foundation 他们都有深入调查的解释。

响应式网站定位图片

1 个答案: