Question

我的响应式网站上有一个居中的div（#content），它会调整大小到浏览器窗口，如下所示：

<div id="container">
  <div id="content">
    <p>Here is some sample text.</p>
  </div>
</div>

#container {
  width: 100%;
}

#content {
  max-width: 805px;
}

它有效，除了#content内的东西没有占据足够的水平空间以将div的宽度推到我设置的最大宽度时。例如，段落标记之间的内容很少，而不是805px，我的一个页面是740px。

我尝试将width: 100%添加到#content，但这会阻止div调整大小。

解决此问题的最佳方法是什么？我是否需要使用媒体查询？

Answer 1

我找到了答案。我确实需要width: 100%，但我还需要box-sizing: border-box，然后我需要将填充的宽度添加到max-width中，如下所示：

#content {
  box-sizing: border-box;
  width: 100%;
  max-width: 885px;
  padding: 40px;
}

阻止Div在流体布局中收缩到内容

1 个答案: