Question

因此，在我的屏幕上，这适用于所有浏览器，但是当我尝试在笔记本电脑或较小的屏幕上查看我的网站时#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
}

Answer 1

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

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

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

将所有div的宽度设为百分比：如果您的#sidebar有margin-left:25%; width:20%;且#center div有width:50%，则两者都有当屏幕缩小时，div（和边距）将调整大小（这是Responsive Web Design工作的一种方式）。 Here is an example on 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>

Here is a jsFiddle with this code.

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

Answer 2

所以我想你想让＃sidebar和#center彼此相邻，集中在#header或？

如果我们能看到你的html标记，那会很好吗

只给每个div位置：相对和左浮动。

然后你给#sidebar留下：50％。然后添加两个div / 2的宽度（#sidebar和#center）。 - ＆GT; （sidebar.width + center.width）/ 2

然后你给结果#sidebar一个左边距和下面一个减号。 - ＆GT; margin-left：-500px

Answer 3

我认为问题在于你的HTML。

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

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

示例：

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

如果同时<section>＆amp; <aside>有一个width:% or px;＆amp; float:left;你应该没事。

我怎么能让这些div在小屏幕上工作？

3 个答案: