Question

#main {
  white-space: nowrap;
  overflow: hidden;
}

#main div {
  display: inline-block;
  heighh: 200px;
  width: 1000px;
  border: solid black;
}

        <div id="main">
          <div id="first">
            1
          </div>
          <div id="second">
            2
          </div id="third">
          <div>
            3
          </div>
        </div>

我正在尝试在CSS代码中执行某些操作。该代码有3个div对象，每个对象的宽度为1000px。我希望这3个div位于同一行，所以我将其写给了父亲div：

white-space: nowrap;
overflow: hidden;

我在每个人中输入：

display: inline-block;

问题是它们全部都切到右边，但是我希望它们从右边和左边都被平等地切掉。这意味着，如果有10px溢出区域，我希望将5px剪切到右侧，将5px剪切到左侧。我该怎么办？

非常感谢，

我要实现的图像：

Answer 1

我相信您可以使用flexbox实现所需的效果，尽管它并不是特别干净，并且对于初学者来说有点高级。

我们没有将所有子级放在#main中，而是将它们放在#main内部的另一个容器中，我们将其称为#wrapper。我们使用flexbox将其所有子项（#first，#second，#third）放在同一行上，然后使该容器任意宽（在本示例中为9999px）这样无论如何，所有项目都可以放在同一行上。

然后，我们使用position: absolute; left: 50%; transform: translateX(-50%);将容器放在#main中。将overflow: hidden应用于#main即可获得所需的截止效果。

有关这些技术的更多信息，请查看A Complete Guide to Flexbox和This question about centering with transform and absolute positioning。

#main {
  overflow: hidden;
  position: relative;
}

#wrapper {
  position: relative;
  width: 9999px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

#wrapper div {
  height: 200px;
  width: 400px;
  border: solid black;
}

<div id="main">
  <div id="wrapper">
    <div id="first">
      1
    </div>
    <div id="second">
      2
    </div>
    <div id="third">
      3
    </div>
  </div>
</div>

Answer 2

在您的情况下，您有3个div标签，它们的宽度固定，因此可以通过将form设为其父元素来轻松实现。将<script> function test() { var x = document.getElementById("string1").value; document.getElementById("ro").value = x; } </script> <body> <table> <tr> <td><b><button onclick="test()">test</button></b></td> </tr> <tr> <td> </td> </tr> <tr> <td> <div id="flex-table"> <table id="names">   <caption>A: Vermögen</caption> <tr> <th>I. Anlagevermögen</th> </tr> <tr> <td class="first">Grundstücke</td> </tr> <tr> <td class="second">Gernotstraße</td> </tr> </table> <table id="input">   <caption> </caption> <tr> <th> <p>€</p> </th> </tr> <tr> <td> </td> </tr> <tr> <td> <form><input id="string1" type="number" value="0"></form> </td> </tr> </table> <table id="values">   <caption> </caption> <tr> <th> <p>€</p> </th> </tr> <tr> <td> </td> </tr> <tr> <td><input id="ro" type="number" value="0" readonly></td> </tr> </table> </div> </td> </tr> </table>设置为您的父元素，它将可以正常工作， >

50％是屏幕宽度的一半。
此处1500像素是子元素宽度（1000像素）的1.5倍。

在这里，我添加了一个示例来演示子宽度：300px;

margin-left

margin-left:calc(50%-1500px);

Answer 3

一个简单的解决方案，无需额外的元素，就是简单地使容器成为flexbox并将元素居中：

(e: Either[A, B]) => e.fold(c1, c2)

#main {
  display: flex;
  justify-content: center; /*center to have overflow from both side*/
  overflow:hidden; /*hide the overflow*/
}

#main div {
  height: 200px;
  width: 500px;
  border: solid black;
  flex-shrink:0; /* Don't shrink element so they overflow */
}

以下是一些相关问题，可以更好地了解正在发生的事情：

Why is a flex-child limited to parent size?

Can't scroll to top of flex item that is overflowing container

溢出：从中间隐藏

3 个答案: