Html 对齐直列块div'上的高度为100%；s

我有一个动态数量的框，我想分布在几列和几行的页面

我有以下愿望：

• 框的内容在高度上是不同的，但我希望一行中的所有div在视觉外观上具有相同的高度。它们有边框和背景色
• 我想在页面宽度上对齐列

理想情况下，我希望页面具有响应性，因此列数应根据浏览器宽度进行调整。但在阅读和观看了大量的例子之后，我不认为这和证明相结合是可能的，因为这总是需要一个row div

所以我选择固定数量的列。通过各种各样的例子，我得出了这个解决方案，但仍然有一个挑战：使每个div具有相同的高度：

HTML:

我想我有两个问题：

第一个问题（可能会使另一个完全删除），是否有更好的解决方案，例如使用jQuery来真正根据浏览器宽度为div的分布创建一个动态网格

如果没有：高度问题能否解决

谢谢

是这样吗？（如果希望更改为浏览器的大小，请将con宽度更改为100%）

HTML:

<div class="con">
    <div class="col">asd</div>
    <div class="col">asdasdasd
        <br />asdas
        <br />asdasd
        <br />asdasd
        <br />asdasd</div>
    <div class="col">asd</div>
</div>

如果需要，浏览器的大小将在

.con

width: 100%;

border-spacing: 10px;

如果你想要像你身上一样的间距，把

边框间距

添加到

.con

width: 100%;

border-spacing: 10px;

---

我一直在努力寻找能够满足我需求的东西，但我担心仅仅使用CSS是不够的

我想jQueryFreewall插件可能会满足我的需要，尽管它可能有点难以满足我的愿望

---

恐怕这不能证明这些列是正确的。我希望框之间有间距，但在您的示例中，可以在表单元格div中安排一个子div，尽管这样做很好。我也一直在考虑将文本左对齐添加到第1列，将文本右对齐添加到第3列，但我希望我可以不添加文本左对齐，这样我就可以获得动态的列数。@JohannesKlapwijk在上一个演示中，框之间有空格。“对齐列”是什么意思？我看不到单元格之间的间距？我想在两个单元格之间留有空间，我的意思是最后一个单元格在右边没有间距，第一个单元格在左边没有间距。如果您在单元格中添加边距，通常会出现这种情况。（见我的JSFIDLE，我希望这能澄清）@JohannesKlapwijk检查一下这个。这很接近，除了左边的列与左边有间距，右边的列与右边有间距。。。

border-spacing: 10px;