html - 如何使 div 对齐并根据浏览器大小调整大小

Question

所以如果我拿一个 div 并将其添加到其中:

<div class="dongs">test</div>
<div class="dongs">test</div>
<div class="dongs">test</div>

.dongs {
 background-color: blue;
 max-width: 500px;
 display: inline-block;
}

它会使 div 以蓝色背景并排排列，但最大宽度会 由于某种原因似乎无法正常工作。

我需要 max-width 才能工作的原因是，如果我把它们放在一起，让我们说 一个用户带着一个小浏览器来了很长时间，它会调整 div 的大小并将它们压扁，这样它们 变小了，这就是 max-width 所做的。允许容器变小但不能变大。

但是，如果我删除内联 block ； div不会彼此相邻但最大宽度 将工作，他们将调整大小。拜托，我需要帮助。谢谢

编辑:我做了很多研究，但似乎找不到答案。我确实看到了一篇 stackoverflow 帖子，但是 这对我来说没有意义，也没有帮助。 Here

Answer 1

你可以使用下面的代码实现你想要的:

.dongs {
    background-color: blue;
    max-width: 33%;
    display: inline-block;
}

说明:因为我们没有在开始时设置任何明确的宽度，浏览器会为所有元素分配适合元素内容所需的最小宽度(就像你在第二个元素中看到的那样)第三个 div 的宽度因内容而异)。但是，设置 max-width: 33% 意味着浏览器在任何时候最多只会分配父元素(如果没有其他父元素则为 body)宽度的 1/3元素。因此，如果内容更多，它将开始环绕。

您还需要另外设置 overflow: hidden; 或 word-wrap: break-word;。第一个使溢出的内容被隐藏(当它们是非常冗长的单词时会很有帮助)，而第二个中断的冗长单词然后将其换行到下一行。可以根据需要使用任何一种。

Demo | W3C Spec for Min/Max Width