css - 如何强制内容在 CSS 中水平溢出？

Question

在 CSS 中容器没有足够的空间容纳内容时，有什么方法可以使内容向左/向右流动而不是向下流动吗？

.container1 {
  width: 70%;
  float: left;
}

.container2 {
  width: 30%;
  float: left;
}

.content {
  width: 50%;
  float: left;
}

.overflowContent {
  width: 20%;
  float: left;
}


/* You can add background colors to see where every part is */

<div class="container1">
  <div class="content">First half</div>
  <div class="content">Second half</div>
  <div class="overflowContent">Overflow</div>
</div>
<div class="container2"></div>

我想要一种使溢出部分位于容器右侧而不是下方的方法。(我希望第三部分显示在容器上/上方 2)我的想法是用 [display : hidden ] 向链接添加一些内容，当我们将鼠标悬停在链接上时，该内容仅在网站其他部分的链接右侧显示 [ display : block ]。

Answer 1

在容器内添加一个 div 来容纳溢出的内容，并将 overflow-x: auto 应用于容器。

flexbox 代码只是一个友好的建议，比 float 布局更容易使用。

* { box-sizing: border-box; }

.container {
  width: 70%; 
  border: 5px solid red;
  overflow-x: auto; /* this causes anything inside that is wider to overflow horizontally */
}

.inner {
  display: flex;
}

.content {
  flex: 0 0 50%;
  padding: 20px;
  background: papayawhip;
}

.overflowContent {
  flex: 0 0 20%;
  padding: 20px;
  background: dodgerblue;
}

<div class="container">
  <div class="inner">
    <div class="content">First half</div>
    <div class="content">Second half</div>
    <div class="overflowContent">Overflow</div>
  </div>
</div>