html - 如果有空间，如何使用css让内容溢出到另一个div？

Question

我有一个主要内容区域和一个右栏内容区域。右栏中的内容通常很短。如果那里没有内容，我如何使主要内容区域的内容溢出到右侧。

CSS

#left {
    width: 440px;
    float: left;
}
#right {
    margin-top: 60px;
    width: 250px;
    float: right;
    padding-left: 20px;
    border-left: 1px;
}

Answer 1

逻辑

如果另一个容器是空的，那么让内容流入另一个容器——这是逻辑。CSS 中没有逻辑机制。您必须至少有一些 JavaScript 或一些服务器端逻辑（有条件地更改服务器发送的静态 HTML）。

如果另一个容器为空，JavaScript（或服务器端）中的逻辑可以将布局更改为允许内容流动的布局。这种流程将如何发生，以及是否可以单独使用 CSS，是另一回事。这只是首先解决相关逻辑。

内容流

仅靠 CSS 很难让内容流入另一个容器。一般来说，这不是内容在浏览器中的流动方式。我认为您可以合理获得的最接近的方法是使用CSS3 Columns，但 IE9 或更早版本不支持它们。更重要的是，当前标准不支持使用不同宽度的列。所以这似乎已经排除了 CSS3 列。

内容流的唯一选择似乎是通过 JavaScript 或在服务器端将内容分解为适当大小的片段，并将内容片段放置在适当的列中。

Answer 2

很难确定右侧边栏中是否有任何内容——纯 CSS 无法做到这一点。但是，如果您希望中心内容仍然溢出，overflow请在您的 CSS 中调用一个属性：

#left {
    width: 440px;
    float: left;
    overflow-x: visible;
}

如果您不想换行，请查看该white-space属性。