负边距和滚动条

Question

负边距和滚动条

3

目前我有这样的东西：

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

当浏览器窗口足够大（宽度超过1000像素）时，一切都正常。但是当我将其调整为较小的宽度时，div的一部分会溢出到左侧，并且滚动条无法覆盖溢出区域。我在Firefox、Chrome和IE8上尝试了它，所有结果都表现出相同的症状。我该如何解决这个问题呢？这里有一个演示：http://pastehtml.com/view/bsanetaio.html（尝试将浏览器窗口调整为小于1000像素的宽度以查看问题）。

- Chris

1

预期结果是什么？你有现成的例子吗？“不起作用”是什么意思很难理解。 - Kyle

负边距是一个不好的想法，应该尽可能避免使用。不过，为了更好地帮助您，我们需要一些更多的信息。 - Liam

@KyleSevenoaks 那里的内容被负边距拉回到了左侧。它已经向左“溢出”屏幕，而且没有向左的滚动条。 - Joseph

我有三个div需要并排居中。 - Chris

我会将其添加到演示中以获得更多的澄清。 - Chris

3个回答

0

这里有一种实现方法：

<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>

- the Hutt

0

最好使用margin:0 auto来居中内容。这比absolute更好。

- sandeep

我并不试图居中内容，请在有时间的情况下查看演示！谢谢:D - Chris

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- diolemo · Accepted Answer

这应该能够实现所需的效果。请注意，内部 div 没有绝对定位。

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

  </div>
</div>

不过，你所尝试做的事情可能有更好的方法。