css - 左侧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 下方...为什么要这样做，我该如何解决？

score 2 · Accepted Answer

下图是因为没有足够的宽度区域来适应导航和图像。对于较小的修复，请尝试使用的边距、填充（大约 0）.mainContent，.headerWrapper并body并排适合它们。

但是，为了更好地适应所有分辨率，您应该使用CSS 媒体查询。

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

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

希望能帮助到你。:)

1 回答 1