如何对齐具有不同列数的两行

Question

我需要将2行与不同列数对齐。第一行有11列。第二行有6列。顶部六列中的六列需要与底部六列中的列对齐并具有响应能力。

我尝试在列，元素本身和行上填充。我仍然无法使其对齐。

有什么建议吗？我查看了flexbox，但不确定如何工作。

Answer 1

首先，我假设您能够将这些元素的宽度强制设置为一个一致的值。我还假设您希望将顶行的前6个与底行的前6个对齐，依此类推。

一种解决方案是将空项目添加到底部行，其宽度与其他底部行元素的宽度相同。然后，使用flexbox用justify-content: space-between;隔开每个元素。当窗口足够大时，这将使它们具有间距（假设这是您想要的响应方式）。

这是一个JSFiddle，它表明： https://jsfiddle.net/a1q79rjk/2/

Answer 2

CSS-Grid可以：

.row {
  display: grid;
  margin-bottom: .25em;
}

.top,
.bottom {
  grid-template-columns: 1fr 35px 1fr 35px 1fr 35px 1fr 35px 1fr 35px 1fr
}

.item,
.box {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid green;
  border-right: 1px solid green;
}

.item:nth-child(2n-1) {
  background: lightgreen;
}

.box {
  background: lightblue;
}

.box:nth-child(1) {
  grid-column: 1;
}

.box:nth-child(2) {
  grid-column: 3;
}

.box:nth-child(3) {
  grid-column: 5
}

.box:nth-child(4) {
  grid-column: 7
}

.box:nth-child(5) {
  grid-column: 9
}

.box:nth-child(6) {
  grid-column: 11
}

<div class="container">
  <div class="row top">
    <div class="item">1</div>
    <div class="item">&rarr;</div>
    <div class="item">2</div>
    <div class="item">&rarr;</div>
    <div class="item">3</div>
    <div class="item">&rarr;</div>
    <div class="item">4</div>
    <div class="item">&rarr;</div>
    <div class="item">5</div>
    <div class="item">&rarr;</div>
    <div class="item">6</div>
  </div>
  <div class="row bottom">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    <div class="box">box4</div>
    <div class="box">box5</div>
    <div class="box">box6</div>
  </div>
</div>

Answer 3

不确定为什么要首先使用这些空格：

*{
  box-sizing:border-box; padding:0; margin:0;
}
table{
  table-layout:fixed; border-collapse:collapse; width:100%; background:#ccc;
}
table>tbody>tr>*{
  height:50px; border:1px solid #000; text-align:center;
}
table+table>tbody>tr>*{
  border-top:0;
}

<table>
  <tbody>
    <tr><th>img 1</th><th>space 1</th><th>img 2</th><th>space 2</th><th>img 3</th><th>space 3</th><th>img 4</th><th>space 4</th><th>img 5</th><th>space 5</th><th>img 6</th></tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr><td>text 1</td><td>text 2</td><td>text 3</td><td>text 4</td><td>text 5</td><td>text 6</td></tr>
  </tbody>
</table>