如何确保两列布局中左侧项目与右侧项目对齐？

Question

如何确保两列布局的

LeftColumn

上的子项目与两列布局的

RightColumn

上的子项目完全对齐？

例如，如何确保

childItem

的第一个

LeftColumn

与

childItem

的第一个

RightColumn

完全对齐。并且

childItem

的第二个

LeftColumn

与

childItem

的第二个

RightColumn

完全对齐，依此类推...

.

这是我的 HTML：

<div class="twoLayout">
    <div class="col-md-6 col-xs-12 LeftColumn">
        <div class="childItem"></div>
        <div class="childItem"></div>
        <div class="childItem"></div>
        <div class="childItem"></div>
    </div>
    <div class="col-md-6 col-xs-12 RightColumn">
        <div class="childItem"></div>
        <div class="childItem"></div>
        <div class="childItem"></div>
        <div class="childItem"></div>
    </div>
</div>

我尝试同时使用

Flex

或

CSS grid

来解决问题，但我无法正确对齐项目：

.twoLayout {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr;
}

我不确定 CSS 是否错误或者 HTML 是否需要采用不同的结构？

Answer 1

试试这个

.twoLayout{
  display: flex;
}

.childItem,.childItem1{
  
    padding: 10px;
    border: 1px solid;
    margin: 15px;
    width: 100px;
    height: 50px;
}
.childItem{
  display: flex;
  justify-content: center;
  align-items: center; 
}

.childItem1{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

<div class="twoLayout">
    <div class="col-md-6 col-xs-12 LeftColumn">
        <div class="childItem">childItem 1</div>
        <div class="childItem">childItem 2</div>
        <div class="childItem">childItem 3</div>
        <div class="childItem">childItem 4</div>
    </div>
    <div class="col-md-6 col-xs-12 RightColumn">
        <div class="childItem1">childItem 5</div>
        <div class="childItem1">childItem 6</div>
        <div class="childItem1">childItem 7</div>
        <div class="childItem1">childItem 8</div>
    </div>
</div>