Fixed sizes

约 585 字大约 2 分钟

2023-08-07

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

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

.card {
  height: 100px;
}

一个卡片容器的高度是固定的，但是它的内容却大于容器的高度，导致了布局被破坏。一个卡片容器的高度是固定的，但是它的内容却大于容器的高度，导致了布局被破坏。

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

.card {
  min-height: 100px;
}

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

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

.tag {
  width: 100%;
}

标签内容

标签内容比较长

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

.tag {
  min-width: 100px;
}

标签内容

标签内容比较长