此页内容

约 578 字大约 2 分钟

2023-08-07

Fixed sizes

破坏布局的常见情况之一是, 具有固定宽度或固定高度的容器,填充了长度不一的内容, 当内容过长时,就会发生 内容溢出的情况,导致 布局被破坏。

固定高度

一种常见的情况是, 一个卡片容器的高度是固定的,但是 它的内容 却大于 容器的高度, 导致了布局被破坏。

.card {
  height: 100px;
}
一个卡片容器的高度是固定的,但是 它的内容 却大于 容器的高度, 导致了布局被破坏。 一个卡片容器的高度是固定的,但是 它的内容 却大于 容器的高度, 导致了布局被破坏。

为了避免内容从 卡片 中溢出,我们需要使用 min-height 而不是 height

.card {
  min-height: 100px;
}
一个卡片容器的高度是固定的,但是 它的内容 却大于 容器的高度, 导致了布局被破坏。 一个卡片容器的高度是固定的,但是 它的内容 却大于 容器的高度, 导致了布局被破坏。

这样就可以避免内容从 卡片 中溢出。

固定宽度

另一种常见的情况是,一个标签的内容太靠近左右边缘,发生溢出。 这是由于使用了 固定宽度。

.tag {
  width: 100%;
}
标签内容
标签内容比较长

要解决这个问题,我们可以使用 min-width 替代 width

.tag {
  min-width: 100px;
}
标签内容
标签内容比较长