左侧的CSS导航，右侧的图片

Question

我不确定如何描述这个问题，但是什么都没有......

我的网站左侧有导航..

.headerWrapper {
    border: 1px solid #FFFFFF;
    float: left;
    height: 745px;
    margin-left: 40px;
    width: 250px;
}

就在那旁边是一个里面有图像的类....

.mainContent {
    float: left;
    padding-left: 5px;
    width: 1000px;
}

图像的宽度为1000像素，并在图像宽度属性中设置。

这个布局在我的屏幕上看起来不错，但在其他屏幕上，图像位于headerWrapper下面...为什么这样做以及如何解决？

Answer 1

图像在下面，因为没有足够的宽度区域适合导航和图像。对于小修正，请尝试使用.mainContent，.headerWrapper和body的边距，填充（大约0）来并排放入两者中。

但是，为了更好地适应所有分辨率，您应该使用CSS Media Queries。

Here是个小提琴。调整结果窗口的大小并查看动画。

基本上，使用媒体查询，您可以根据窗口大小定义样式，例如在您的情况下，您可以减小图像的大小以适应低分辨率屏幕等等。

希望它有所帮助。 ：）