根据列位置对齐列内的内容

Question

我正在创建一个包含三列的网格。每个网格框都有一个 div ，其中最大宽度为 280px，有时网格列比这更宽。我想对齐网格框中的内容，使左列向左对齐，中央列向中心对齐，右列向右对齐。请参阅下图以获得我想要的结果：

目前我在网格容器元素上使用 CSS justify-items: justify 规则。我的当前结果如下：

我可以用 CSS 做什么来生成我想要的布局图中的布局？

Answer 1

您可以使用 Flexbox。 Flexbox 使得实现这些布局变得非常容易。

你必须使用 justify-content:space-between.

Fiddle Link

Answer 2

您可以为此使用 CSS 网格，但是（据我所知）您必须将项目定位到特定的 grid-columns 并根据需要使用 [=13= 对齐它们] 属性.

特殊情况是一行只有一个项目。

fiddle

.container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  width: 100px;
  height: 300px;
  background: pink;
}

.item:nth-of-type(3n) {
  justify-self: end;
}

.item:nth-of-type(3n + 2) {
  justify-self: center;
}

.item:nth-of-type(3n + 1):last-of-type {
  grid-column: 2;
  justify-self: center;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 3

最简单的解决方案是将 item 宽度设为 33%，然后使用 nth-child 选择器将每个列的内容左、中、右对齐.

为此，您可以使用 inline-block 或 flex 等，在第一个示例中，我使用了 Flexbox。

堆栈片段

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex .item {
  width: calc((100% / 3) - 10px);
  border: 1px dotted black;
  box-sizing: border-box;
  margin: 5px;
  display: flex;
}

.flex .item:nth-child(3n+2) div {
  margin: 0 auto;                  /* center align every 3rd, start from item 2  */
}

.flex .item:nth-child(3n+3) div {
  margin-left: auto;               /* right align every 3rd, start from item 3  */
}

.flex .item div {
  max-width: 280px;
  padding: 20px;
  background: lightgray;
}

<div class="flex">
  <div class="item">
    <div>Some content that can be max 280px wide</div>
  </div>
  <div class="item">
    <div>Some content that can be max 280px wide</div>
  </div>
  <div class="item">
    <div>Some content that can be max 280px wide</div>
  </div>
  <div class="item">
    <div>Some content that can be max 280px wide</div>
  </div>
  <div class="item">
    <div>Some content that can be max 280px wide</div>
  </div>
</div>

对于那些需要支持不支持 Flexbox（或有错误行为）的浏览器的人，这个使用 inline-block 和 float

.parent::after {
  content: '';
  display: block;
  clear: both;
}

.parent .item {
  float: left;
  width: calc((100% / 3) - 10px);
  border: 1px dotted black;
  box-sizing: border-box;
  margin: 5px;
}

.parent .item:nth-child(3n+2) {
  text-align: center;              /*  center align every 3rd, start from item 2  */
}

.parent .item:nth-child(3n+3) {
  text-align: right;               /*  right align every 3rd, start from item 3  */
}

.parent .item div {
  display: inline-block;
  max-width: 280px;
  padding: 20px;
  background: lightgray;
  text-align: left;
}

<div class="parent">
  <div class="item">
    <div>Some content that can be max 280px wide</div>
  </div>
  <div class="item">
    <div>Some content that can be max 280px wide</div>
  </div>
  <div class="item">
    <div>Some content that can be max 280px wide</div>
  </div>
  <div class="item">
    <div>Some content that can be max 280px wide</div>
  </div>
  <div class="item">
    <div>Some content that can be max 280px wide</div>
  </div>
</div>

根据列位置对齐列内的内容

Aligning content within columns based on column position

html

css

flexbox

css-grid