让div 卡片一行排列4个

可以通过设置 div 的宽度和浮动来实现卡片一行排列 4 个，例如：

HTML 代码：

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

CSS 代码：

.card {
  float: left;
  width: 23%; /* 保留一定的空间用于边距 */
  margin: 1%;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

通过设置每个卡片的宽度为 23%，并给每个卡片设置 1% 的外边距，可以保证每行能够容纳 4 个卡片。同时，将每个卡片设置为浮动，使它们能够排列在一行中。最后，添加一些样式来美化卡片的外观。

相关问题

让确定大小的div 卡片循环一行排列4个

可以使用CSS中的`flexbox`布局来实现让确定大小的div卡片循环一行排列4个的效果。具体操作如下：

HTML代码：

<div class="card-container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

CSS代码：

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  width: 200px;
  height: 300px;
  margin-bottom: 20px;
  background-color: #f2f2f2;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

解释：

1. `display: flex;`将卡片容器设置为`flex`布局；
2. `flex-wrap: wrap;`让卡片容器自动换行；
3. `justify-content: space-between;`将卡片容器中的卡片均匀分布在容器中；
4. `.card`设置卡片的宽度、高度、外边距、背景颜色、边框圆角和阴影效果。

<div class="container"> <div class="card">卡片1</div><div class="card">卡片5</div> <div class="card">卡片6</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> <div class="card">卡片5</div> <div class="card">卡片6</div> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> <div class="card">卡片5</div> <div class="card">卡片6</div> </div>卡片每行排列6个 等距排列 css如何布局，最后一行若不是6个 使其从左到右排列

您可以使用 flexbox 布局来实现等距排列，并使用 `flex-wrap: wrap` 属性使卡片在容器中自动换行。同时，您可以使用 `justify-content: space-between` 属性来使卡片在每行中等距排列，使用 `align-items: flex-start` 属性来使每行卡片顶端对齐。最后，使用 `width: calc(16.6667% - 10px)` 和 `margin: 5px` 属性来设置每个卡片的宽度和间距。

以下是实现的 CSS 代码示例：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.card {
  width: calc(16.6667% - 10px);
  margin: 5px;
}

如果最后一行不足6个卡片，卡片会自动从左到右排列。