blob: 886a661776e498f905ee7bc77dceb912e338b623 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
---
title: 处理 Multicol 中的溢出
slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
tags:
- CSS
- Guide
- Layout
- multi-column
translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
---
<div>{{CSSRef}}</div>
<p class="summary">在本指南中，我们将了解 multicol 如何处理溢出，包括在列框内以及内容超出容器容量的情况。</p>
<h2 id="column_boxes_内部溢出">column boxes 内部溢出</h2>
<p>当子项的大小大于列框时，就会发生溢出。例如，当列中的图像宽度大于 <code>column-width</code> 值或 <code>column-count</code> 声明的列数禅城的列宽度时，就可能会发生这种情况。</p>
<p>在这种情况下，内容溢出（并且是可见的）到下一列，而不是被列框裁切。你可以在下面的示例中看到，在编写本文时，浏览器以不同的方式处理预期的呈现图像。</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16095/image-overflow-multicol.png" style="height: 328px; width: 800px;"></p>
<p>如果你想要一个图像尺寸缩小到适合列框，标准的响应式的解决方案是设置最大宽度:100%。</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}</p>
<h2 id="更多的列">更多的列</h2>
<p>如何处理溢出的列取决于是在一个片段化的媒体上下文（比如打印）中，还是在一个连续的媒体上下文（比如 web 页面）中。</p>
<p>在一个片段化的媒体中，一旦碎片（例如页面）中充满了列，多出的列将移至新页面。 在连续介质中，列将沿横向溢出。 在 web 上，这意味着水平滚动条的出现。</p>
<p>下面的示例显示了这种溢出行为。multicol 容器有一个高度，列的文本多于空间，因此多出的列会在容器外面出现。</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}</p>
<p>本规范的未来版本中，会允许横向溢出的列向下排列，用户能向下滚动鼠标查看溢出的列。</p>
<h2 id="使用纵向的媒体查询">使用纵向的媒体查询</h2>
<p>multicol 在 web 上的一个问题：如果你的列比 viewport 高，读者需要上下滚动来阅读，这样的用户体验不好。避免这种情况的一种方法是，只有在有足够的高度时才应用列属性。</p>
<p>在下面的示例中，我们使用了 <code>min-height</code>。</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}</p>
<p>在本系列的最后一篇指南中，我们将看到<a href="/en-US/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">片段化下的 Muticol 如何使用</a>的规范，去控制列内容的溢出。</p>
|
