Question

我刚刚在这里学习并尝试了所有不同类型的div（绝对，相对，固定等），但我真的很难搞清楚这一点。

这是我正在处理的网站：http://www.chelseyburch.com

在我的电脑上，电话号码是1366 x 768，它看起来就像我想要的那样。但是当我尝试任何其他分辨率或更改浏览器大小时，标题和滑块之间会有很大的空间。此外，随着画廊旋转木马滑块（在人，地方，东西链接上），图像之间有很多空间。

我很抱歉，如果这看起来像是一个愚蠢的问题，但我真的很难弄清楚如何让它在所有分辨率中看起来都一样。

这就是它的样子。我知道它到处都是，这就是我寻求帮助的原因。提前谢谢。

#header {
    float: left;
    position: relative;
    margin: 30px;
}

#social {
    float: right;
    position: fixed;
    top: 30px;
    right: 0;
    margin: 5px;
}

#slidy-container {
    width: 100%; 
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 0;
}

.jcarousel-wrapper {
    height: 480px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}

Answer 1

您将#slidy-container置于绝对位置，并使用bottom:0放置在底部。尝试将其更改为：

#slidy-container {
  width: 100%; 
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 130px; /* change this value to your header height */
}

但是这仅适用于大于800px的分辨率。如果您需要较低的分辨率，请尝试媒体查询并为800px以下的分辨率创建新的css布局：

@media (min-width: 800px) {
    #slidy-container {
        top: 300px;
    }
}

Answer 2

试试这个

#slidy-container{
  width: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 150px;  /* this is the line I changed */
}

我删除了底部，这是在不同的分辨率上弄乱它，并替换为顶部：150px。

如何使我的布局在所有分辨率中看起来都一样？

2 个答案: