我不是真正的 HTML/CSS 专家，如果它真的很简单，请原谅。我有一些代码可以产生这个。
这是CSS的相关部分
div.content {
/* padding: 4px 0px 5px 11px; */
/* margin: 0px 0px 0px 0px; */
width: 100%;
color: #000000;
background-color: #f9f9f9;
overflow: hidden; /* NEW */
overflow-x: hidden;
overflow-y: hidden;
align-self: auto;
}
div.column {
padding: 10px 10px 10px 10px;
/* width: 100%; */
float: left;
}
div.twol {
box-sizing: border-box;
width: calc(100% / 2 - 20px);
padding: 10px;
float: left;
}
div.twor {
box-sizing: border-box;
width: calc(100% / 2 - 20px);
padding: 10px;
float: right;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 40%;
border-radius: 5px;
margin: 5px;
}
最初我只将 div.two 与 float:left 一起使用，但无论我尝试什么，它都会使两个顶部图表都向左对齐，从而导致对齐不均匀。有没有办法让这些图表(在卡片内)始终对齐，这样才合理？目标是，当它是一列时，它从一边到另一边，当涉及到两列、三列等等时，我希望保持相似。我不想创建多个 CSS 来涵盖每个场景。
这里是旧方法，只有一个 div.two。请注意顶部图表如何不向左/右对齐，从而使第一行的整体尺寸小于第二行。
该解决方案应该适用于 1、2、3、4、5、6 个“列”(不确定这是否重要)。
以防万一您需要完整的 html:https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example9/Example9.html
最佳答案
您遇到的问题是由于 box-sizing 引起的属性，当前设置为 border-box .这使得 padding应用于元素的宽度会被减去，因此您不必在 width 中考虑这一点的元素。
因为您有以下规则集(摘录):
div.two {
width: calc(100% / 2 - 20px);
padding: 10px;
}
.card {
margin: 5px;
}
这实际上是将卡片的宽度设置为父级尺寸的一半减去 20px(这将是您所想的填充)，但正如您所拥有的 box-sizing: border-box ，填充已经处理完毕，但每张卡片的总边距仍然为 10px，但在公式中减去 20px。
所以解决方案就是:
div.two {
width: calc(100% / 2 - 10px);
padding: 10px;
}
div.column {
box-sizing: border-box;
}
这样卡片将占据整个宽度，并且它们之间仍然有间距。
此解决方案适用于任意数量的列 - 您只需将宽度除以列数(例如，对于 4 列:calc(100% / 4 - 10px))。
了解更多关于 box-sizing 的信息CSS-Tricks 的属性。
顺便说一句，在链接的 HTML 中，您似乎有两个 <html>标签。你应该只有一个 conforming with the standards .
关于html - 使用一个 css 类将卡片对齐到两端？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54502945/