如何在HTML中对齐卡片？[副本]
我有一个包含一些卡片的容器，我想让每一张卡片开始在容器的左边框和结束在右边框，像下面的代码。
<html>
<style>
.container {
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
.card{
border:1px solid black;
}
</style>
<body>
<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>
</body>
</html>但最后两个元素之间有太多的空间，我如何删除它？？
我已经尝试添加margin-left/right以使其行为符合我的要求，但角卡不会碰到边框。有什么帮助吗？？
共有1个答案
这是因为justify-content:space-between的行为。了解justify-content的行为请访问此处
为了实现您想要的，您可以将容器设置为块元素并将子项设置为浮动，如float:left。
为了避免不需要的空格，我删除了的和左边距。Card:first-child的右边距。Card:last-child
您可以通过设置公共宽度并清除第n个子的边距空间，专门设置每行卡片内容的数量。目前，我为每行5个元素制作了此代码
.container {
display: block;
width: 100%;
}
.card {
border: 1px solid black;
float: left;
margin: 1px;
padding: 10px 3px;
/*setting width for each and every card element as well as -10px for removing the margin width for 5 elements*/
width: calc( 100% / 5 - 10px);
}
/*first element*/
.container .card:first-child {
margin-left: 0;
}
/*last element of the first row*/
.container .card:nth-child(5n) {
margin-right: 0;
}
/*first-element of the 2nd row*/
.container .card:nth-child(5n+1) {
margin-left: 0;
}
/*last element*/
.container .card:last-child {
margin-right: 0;
}<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>-
如何将列对齐，使它们位于页面的中心？这些列是向左对齐的，但我需要它们在使用CSS3、HTML5和bootstrap V3.3.4的页面Im中间居中 CSS
-
问题内容： 我是HTML的新手，正在尝试学习如何使用表单。 到目前为止，我最大的问题是对齐表格。这是我当前的HTML文件的示例： 问题在于，“电子邮件”后的字段框与名字和姓氏相比在空格方面有很大不同。使其真正“排队”的“正确”方法是什么？ 我正在尝试练习良好的格式和语法…很多人可能不确定使用CSS来做到这一点，到目前为止，我仅了解HTML的基本知识。 问题答案： 另一个使用CSS的示例，我只是将表
-
问题内容： 我有一张表格，其中一列包含十进制数字。我希望以类似于文字处理器的“十进制制表符”功能的方式对齐它们，以便所有点都位于一条垂直线上。 我目前有两种可能的解决方案，但我希望有更好的解决方案… 解决方案1：在HTML中拆分数字，例如 与 （是的，此解决方案不能完全按原样工作。但是，此概念是有效的。） 解决方案2：我发现提到 根据参考页，这是HTML4的一部分，但是在我必须使用的浏览器FF3.
-
问题内容： 对于所有默认输入，您要填充的文本从左侧开始。您如何使它从右边开始？ 问题答案： 在CSS中使用text-align属性： 这将在页面的所有输入中生效。 否则，如果只想对齐一个输入的文本，请设置内联样式：
-
描述 (Description) 卡片HTML布局包含许多类，如下所示 - S.No 课程和描述 1 cards 这是卡片容器。 2 card-header 它是可选的卡片标题，用于显示卡片标题。 3 card-footer 它是可选的，用于指定其他信息或自定义链接。 4 card-content 它是卡内容的主要容器，是必需的。 5 card-content-inner 它是可选的附加内包装，用
-
问题内容： 我试图找到最有效的方法来使div对齐文本。我尝试了几件事，但似乎都没有用。 问题答案： 对于CSS 2浏览器，可以使用/ 来使内容居中。 jSFiddle提供了一个示例： 可以将旧浏览器（Internet Explorer 6/7）的hack合并为样式，并用于从较新的浏览器中隐藏样式：