负边距和滚动条答案

【问题标题】：Negative margin and scrollbars负边距和滚动条
【发布时间】：2012-04-07 20:56:30
【问题描述】：

我目前有这样的事情：

<div class = "className" style = "position: absolute; left: 50%; margin-left: -500px;" >

当浏览器的窗口足够大（超过 1000 像素宽）时，这可以正常工作，但是当我将其调整为较小的宽度时，部分 div 向左溢出并且滚动条不会覆盖溢出区域。我在 Firefox、Chrome 和 IE8 上尝试过，都导致相同的症状。我怎样才能解决这个问题？这是一个演示：http://pastehtml.com/view/bsanetaio.html（尝试将浏览器窗口调整为小于 1000 像素的宽度以查看问题）。

【问题讨论】：

预期的结果是什么？你有一个活生生的例子吗，很难理解你所说的“不起作用”是什么意思。
负边距是个坏主意，应尽可能避免。不过，为了更好地提供帮助，我们需要更多信息吗？
@KyleSevenoaks 他在那里的内容被拉回左边的负边距。它“溢出”了左侧的屏幕，并且左侧没有滚动条。
我有三个 div 需要彼此居中。
我会将它添加到演示中以进行更多说明

标签： html css scrollbar

【解决方案1】：

最好使用margin:0 auto 将内容居中。不如绝对

【讨论】：

我不是要让内容居中，如果有时间请看一下演示！谢谢：D

【解决方案2】：

这应该可以达到预期的效果。请注意，内部 div 没有绝对位置。

<div style="position: absolute; left:50%">
  <div style="width: 1000px; margin-left: -500px;">

  </div>
</div>

可能有更好的方法来做你想做的事情。

【讨论】：

这仍然会导致相同的溢出行为。你能看一下演示吗？
这是一个alternative way 以获得相同的结果。如果需要，您可以使用 display: inline-block 而不是 float。
@Abody97 我不认为这是可能的。

【解决方案3】：

这是实现此目的的一种方法：

<html>
  <head>
    <style>
      #container {
        margin: 0 auto;      /* if you want center the container */
        white-space: nowrap; /* get all divs on one line, don't need this if fixed width used */
        width: min-content;  /* you can use fixed size*/
      }
      #container div {
        display: inline-block;
        margin: 0 10px;
        width: 320px;
        height: 300px;
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <div id="title"> Welcome! </div>
    <div id="container">
      <div> Data, data, data<br />data data, data </div>
      <div> Data, data, data<br />data data, data </div>
      <div> Data, data, data<br />data data, data </div>
    </div>
  </body>
</html>

【讨论】：