如何在html中对齐卡片？ [复制]
Posted
技术标签:
【中文标题】如何在html中对齐卡片？ [复制]【英文标题】：How to align cards in html? [duplicate] 【发布时间】：2019-04-06 10:31:35 【问题描述】：我有一个包含一些卡片的容器，我希望每张卡片从容器的左边界开始并在右边界结束，如下面的代码。
<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>但最后 2 个元素之间的空间太大，我该如何删除它？？
我已尝试添加 margin-left/right 以表现出我想要的行为，但角卡不会触及边框。有什么帮助吗？？
编辑：这是我的期望和
我得到了什么
【问题讨论】：
您是指在小屏幕上查看时的空间吗？ @Dark_thunder 我已经在编辑http://jsfiddle.net/gaurav1330/q32oLat1/2/ 中尝试过您的代码，看看。为了验证我已经为每张卡片添加了边框。上面上传的代码可以正常工作。 这对我来说很好。如果您对间距有疑问，或许可以让我们知道您使用的屏幕分辨率会产生问题。 等等对不起各位，我不加flex-wrap:wrap，请立即查看问题
@Dark_thunder 正如管理员所说，指定您遇到问题的屏幕尺寸。您可以查看更新的网址link
【参考方案1】：
我不太确定我是否重现了您的问题，但这里有一个 codepen https://codepen.io/salallegra/pen/mQbBea 可能会有所帮助。
<html>
<style>
.container
display: flex;
justify-content: space-between;
border-style: solid;
border-width: 1px;
border-color: red;
margin-left: 0px;
margin-right: 0px;
flex-direction: row;
flex-wrap: wrap;
.card
border-style: solid;
border-width: 1px;
border-color: red;
body
margin-left: 0;
margin-right: 0;
</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>
我删除了正文的左右边距，并在所有卡片和容器本身周围放置了边框。
我还在 Chrome 开发者工具中检查了不同的视口尺寸，不同尺寸下的间距看起来不错。
【讨论】：
【参考方案2】：这是因为justify-content: space-between 的行为。了解justify-content的行为请访问here
要实现您想要的，您可以将container 设置为block element，并将子项设置为像float:left 一样浮动。
为了避免不需要的空格，我删除了.card:first-child 的margin-left 和.card:last-child 的margin-right
您可以通过以下方式具体设置每行
card内容的数量 设置一个共同的宽度并清除margin空间nth-child.目前我为每行 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>【讨论】：
第一张和第六张卡没有对齐，所以我没有使用margin。 让我知道你想要连续多少个元素@Dark_thunder @Dark_thunder 查看编辑后的答案。我认为每行有 6 个元素，并且我在 css 上有明确的 cmets。 元素数量暂时未知，但现在如果我添加第 8 个元素，它应该低于第 2 个元素，第 6 个元素也应该触及它的父元素的边框。 @Dark_thunder 这很神秘，你可能无法说出元素的总数，但你必须能够说出要放置在一行中的元素的数量。现在检查答案。我仍然认为连续有 6 个元素。以上是关于如何在html中对齐卡片？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章