如何让div在一行中正确显示？

Question

嘿，我正在尝试将多个 div 作为 table headers 在一行中显示。但是当我将 window 尺寸变小时，一些 headers 会转到下一行。 如何将它们保持在一行中并在需要时缩小整个 div 的大小？

Answer 1

您需要将 div 的宽度设置为百分比或 vw。

在这里，它将占据父级的 20% div

.example_div {
    width: 20%;
}

此处它将占据设备宽度的 20%（可能大于父宽度）

.example_div {
    width: 20vw;
}

您可以将这些与 max-width 结合使用，以允许更大的屏幕保持您设置的初始宽度行为，我在下面假设它是像素。

在这里，它会设置最大宽度，但在需要时会按百分比缩小。

.example_div {
    max-width: 100px;
    width: 20%;
}

Answer 2

尝试使用 display: table-cell; 来防止 div 在页面上向下流动。如果你想让它们调整大小，那么也许像 Bootstraps 布局这样的东西可以帮助你。