0 
<div id="wrapper">
  <div id="top-part">
    some para here
  </div>
</div>

主要的CSS：

#wrapper {
  position: relative;
  width: 1024px;
  margin: 0 auto;
  display: block;
}

这充满了没有滚动条的窗口。
但是当在上面的包装之后添加另一个内容时，它会出现滚动条。为什么？？

<div id="wrapper">
  <div id="wrap">
    <p>
      <img src="images/some.gif" />
      some para here
    </p>
    <a href="#">Link here</a>
  </div>
</div>

我已经插入了 3 次以上的包装内容...... Css 在这里......

#wrap {width: 322px; margin: 6px;}

我试过display: inline-block了，消除margin等怎么办？我也试过 class="wrap" 。

4

2 回答 2

0

您遇到问题的可能性有两种。

1.出现垂直滚动条导致出现水平滚动条

如果您将元素定位为屏幕的确切宽度，则每当出现垂直滚动条时，这将减少可用的水平宽度，并意味着水平滚动条也会出现。您不需要指定宽度来将display: block元素拉伸到页面的整个宽度（使用浮动或绝对位置时除外）。取而代之的是，只需删除width: 1024px;，元素就会自动拉伸以填充可用空间。

2.横向溢出的孩子

如果通过特定的 CSS 或样式强制这样做，则包装父级中的子级将始终延伸到其父级之外。即如果你有漂浮的孩子——例如：

+--------------------+
| +---+ +------+ +------+
| |   | |      | |      |
| +---+ +------+ +------+
+--------------------+

如果父级的尺寸被设置为页面的整个宽度，则将出现水平滚动条，因为子级正在推动可滚动区域之外。为了防止这种情况，您可以overflow: hidden在包装元素上使用：

+--------------------+
| +---+ +------+ +---|
| |   | |      | |   |
| +---+ +------+ +---|
+--------------------+

更新：-关于您的评论

当屏幕/视口很小时，您似乎正在尝试找出处理显示内容的最佳方法。最好的做法不是禁用或使用滚动条，overflow:hidden而是创建所谓的“响应式布局”。有很多方法可以实现这样的布局，它们都取决于您的目标受众和目标设备。但是，无论您选择哪种路线，它们都遵循相同的基本原则：

  1. 设计您的布局，使其折叠，首先显示最重要的内容。
  2. 通过调整大小或使用多列结构来设计您的布局以进行拉伸。
  3. 避免在包装器上使用固定宽度，但是您可以在子元素上这样做。
  4. 学会使用max-width和min-width
  5. 学习使用“渐进式增强”，这意味着您应该有一个对大多数人都适用的基本布局——但对于那些可以支持更好功能的人来说甚至更好。

创建响应式布局的最简单方法是从现成的基本模板开始。以下是一些可以帮助您入门的方法：

  1. http://www.getskeleton.com
  2. http://twitter.github.com/bootstrap
  3. http://www.responsivegridsystem.com

只需使用关键字responsive html template或responsive html boilerplate.


简单地说

作为基本规则，最好尝试将您的设计分解为列并使用float: left或其他定位功能（如display: inline-block. 但是，一旦进入浮动状态，您就需要知道如何使用某种清除修复或其他具有相同影响的 css 技巧来清除浮动，例如overflow: hidden. 一个简单的响应式布局如下：

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

使用以下 CSS：

.row { 
  overflow: hidden;
  background: #aaa;
  padding: 10px;
}

.row .col {
  float: left;
  width: 200px;
  background: #777;
  margin: 2px;
}

在宽屏幕上，此布局将显示如下：

+--------------------+
| +---+ +---+ +---+  |
| |   | |   | |   |  |
| +---+ +---+ +---+  |
+--------------------+

但在较小的屏幕上会显示：

+---------+
| +---+   |
| |   |   |
| +---+   |
| +---+   |
| |   |   |
| +---+   |
| +---+   |
| |   |   |
| +---+   |
+---------+

诀窍是对元素进行排序，以便将最重要的内容放在首位。最不重要的内容可能会落在页面底部（或者取决于您部署的 CSS/JS 技巧），您可以隐藏该内容或将其转换为出现在完全不同的位置。它可能会变得相当复杂，并且是一个不断发展的领域，这就是为什么从可以为您完成艰苦工作的基本模板开始是一个好主意的原因。

于 2013-03-06T11:44:32.207 回答
0

将您的包装器 css 更改为：

#wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: block;
}

并注意 img 标签的宽度。看看它们中的任何一个是否没有超出界限。

于 2013-03-06T11:46:10.617 回答