Question

<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，取消保证金等。该怎么办？我也试过class =“wrap”。

Answer 1

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

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

如果将元素定位为屏幕的精确宽度，则每当出现垂直滚动条时，这将减小可用的水平宽度，并且还表示水平滚动条也会出现。您不需要指定宽度来将display: block元素拉伸到页面的整个宽度（使用浮点数或绝对位置时除外）。而只需删除width: 1024px;，元素应自动拉伸以填充可用空间。

2。在水平上溢出儿童

如果通过特定的CSS或样式强制执行此操作，则包装父级中的子级将始终扩展到其父级之外。即如果你有漂浮的孩子 - 例如：

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

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

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

更新： - 关于您的意见

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

设计您的布局，使其崩溃，首先显示最重要的内容。
通过调整大小或使用多列构造来设计要拉伸的布局。
避免在包装器上使用固定宽度，但是可以在子元素上使用。
学习使用max-width和min-width
学习使用“渐进式增强”，这意味着您应该拥有适合大多数人的基本布局 - 但对于那些可以支持更好功能的基础布局更好。

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

http://www.getskeleton.com
http://twitter.github.com/bootstrap
http://www.responsivegridsystem.com

您可以使用关键字responsive html template或responsive html boilerplate搜索更多信息。

简单地说

作为一项基本规则，最好尝试将您的设计分解为列并使用float: left或其他定位功能（如display: inline-block）浮动它们。一旦你进入浮动状态，你需要知道如何使用某种clear fix或其他具有相同效果的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技巧），您可以隐藏该内容或将其转换为显示在完全不同的位置。它可能变得相当复杂，并且是一个不断发展的领域，这就是为什么从一个可以为你努力工作的基础模板开始是个好主意。

Answer 2

将包装器css更改为：

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

并且还要注意img标签的宽度。看看他们中的任何一个是否没有超出范围。

为什么包装元素会自动增加？

2 个答案:

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

2。在水平上溢出儿童

更新： - 关于您的意见