0

因此，在我的屏幕上，这在所有浏览器上都可以正常工作，但是当我尝试在笔记本电脑或较小的屏幕上查看我的网站时，#sidebar 和 #center 会向左移动。我认为它与#sidebar的margin-left有关，但有没有其他方法可以使侧边栏和中心位于标题下方并彼此相邻？

#header {
  background-image:url(media/dddd.png);
  margin-left:auto;
  margin-right:auto;
  width:1000px;
  height:250px;
  position:relative;
}

#sidebar {
  height:800px;
  width:300px;
  background-color:#CCFFFF;
  float:left;
  margin-left:23.5%;
  margin-right:auto;
  position:static;
}

#center {
  margin-left:auto;
  margin-right:auto;
  height:800px;
  width:700px;
  background-color:white;
  float:left;
  border:1px solid black
}
4

3 回答 3

1

由于#sidebarhas left-margin: 23.5%;，当您缩小窗口时它会向左移动，因为它始终是窗口宽度的 23.5%。因此，如果您的窗口为 1000 像素宽，则#sidebardivmargin-left将为 235 像素，并且该数字会随着窗口的宽度而减小（使 div 看起来像向左移动）。

div 向下移动是因为窗口的#center宽度小于margin-left值 + 的宽度#sidebar+ 的宽度#center。当窗口太窄时，div 会重新排列以适应（例如文本框中的文本在空间不足时如何换行）。

如果您想在窗口变小时时保持布局不变，您可以做两件简单的事情：

将所有 div 的宽度设为一个百分比：如果您的#sidebarhasmargin-left:25%; width:20%;和您的#centerdiv has width:50%，则两个 div（和边距）都会随着屏幕的缩小而调整大小（这是响应式网页设计的一种方式）。这是 jsFiddle 上的一个示例。

将所有内容放在一个容器 div 中：因为听起来您希望将标题、侧边栏和内容放在一个块中，所以您可以将所有这些元素包装在一个容器 div 中。您将不得不稍微更改您的 CSS，但基本实现看起来像这样：

CSS

#container {
  width: 1000px;
  margin-left:auto;
  margin-right:auto;
}

#header {
 background-color:red;
 width:auto;
 height:250px;
}

#sidebar {
  height:800px;
  width:300px;
  background-color:#CCFFFF;
  float:left;
}

#center {
  height:800px;
  width:auto;
  background-color:green;
  border:1px solid black
  float:left;
}

HTML

<div id=#container">
  <div id="#header">header content</div>
  <div id="#sidebar">sidebar content</div>
  <div id="#center">center content</div>
</div>

这是带有此代码的 jsFiddle。

由于容器 div 具有设定的宽度，因此您不必担心子元素的宽度。

于 2013-09-10T16:19:48.490 回答
0

所以我想你想让#sidebar和#center彼此并排，居中并在#header下还是？

如果我们可以看到您的 html 标记，那就太好了，但是

只需给每个 div position:relative 和一个浮点数。

然后你给#sidebar left:50%。然后添加两个 div /2 的宽度（#sidebar 和 #center）。--> (sidebar.width + center.width) /2

然后你给结果#sidebar，前面有一个margin-left和一个减号。--> 左边距：-500px

于 2013-09-10T16:19:05.547 回答
0

我认为问题在于您的 HTML。

确保您的侧边栏<aside>和您的内容<article>嵌套在同一个<div>或<section>.

我使用的术语是 HTML5 语法。如果您不使用 HTML5，请将所有元素替换为<div>.

例子：

<header></header>
<div>
    <section></section>
    <aside></aside>
</div>

如果<section>&<aside>都有width:% or px;&float:left;你应该没问题。

于 2013-09-10T16:24:18.893 回答