-1

下面是我的网站 http://i44.tinypic.com/jayyhu.jpg的理想外观

但它在所有计算机中看起来并不相同。我用 browsershots 检查了它。org 和我的网站在几乎所有浏览器中都出现问题。当我调整浏览器大小时，它甚至会搞砸。

也许是因为我在浏览器调整大小时没有水平滚动。请建议我一些解决方法。

我的网站网址是 http://come2chat.x10host.com

如果它没有打开，请刷新窗口。我在开发期间使用的是免费的虚拟主机，所以它不可靠。

4

2 回答 2

1

我认为最大的问题是您使用边距和填充来使屏幕中的内容居中，这使一切变得更加困难。

相反，创建一个包装div并设置margin: 0 auto;它。

我在你的页面上做了这个小改动，你可以在这里查看：

http://www.radiogramola.cat/stack/u.html

我只添加了两个带有“包装器”类的 div 和一些 CSS 重置。您可以检查代码。

然后，您应该决定要创建哪种布局：

  • 固定：像 stackoverflow.com 一样，当用户调整窗口大小时，页面不会改变。
  • Fluid：像 wikipedia.org 一样，它扩展占用所有可用空间并适应浏览器大小。
  • 响应式：像 css-tricks.com 一样，它会根据浏览器大小更改布局。

您可以通过视觉解释查看此视频：

http://blog.teamtreehouse.com/whats-the-difference-between-fixed-fluid-adaptive-and-responsive-web-design-treehouse

根据您的决定，您的下一步将有所不同。

于 2013-10-06T21:26:04.507 回答
0

问题在于您的布局。您有固定的宽度和高度（以像素为单位）。当您调整窗口大小时，它们将保持其高度和宽度，并且不会相应地调整大小。所以内容重叠或跳跃。

以百分比修复所有内容。这是你能得到的最好的。

我在下面放了一个演示。

<body id="library">


        <div id="body">

            <div id="sidebar"></div>

            <div id="content">

                <div id="navbar"></div>

                <div id="contentwindow"></div>

            </div>

        </div>


</body>

css

html {
  height: 100%;
  width: 100%;
}
#library {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
}
#library #body {
  width: 90%;
  height: 90%;
  background-color: gray;
  margin: 3% 5%;
}
#library #body #sidebar {
  display: inline-block;
  width: 20%;
  height: 90%;
  background-color: #8eeeff;
  margin: 2%;
}
#library #body #content {
  display: inline-block;
  width: 70%;
  height: 90%;
  background-color: red;
  margin: 2%;
}
#library #body #content #navbar {
  width: 90%;
  height: 20%;
  background-color: blue;
  margin: 3% 5%;
}
#library #body #content #contentwindow {
  width: 90%;
  height: 70%;
  background-color: green;
  margin: 3% 5%;
}

运行它并调整窗口大小。

于 2013-10-06T21:12:32.913 回答