流体/自动高度相同的元素CSS / SCSS

Question

我想使三个元素具有与仅文本内容相同的高度。或者至少是一种在顶部对齐的方式，使它们保持在同一行。

布局分为两列和三行（如代码段所示，列1，列2和列3，所以我可以由父div分配属性。

如果变量可以，我正在使用SCSS。

这里是代码：

    .some-page-wrapper {
      background-color: red;
    }
    
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
    }
    
    .col {
      display: flex;
      flex-direction: column;
      flex-basis: 100%;
      flex: 1
    }
    
    .orange-column {
      background-color: orange;
      height: auto;
    }
    
    .blue-column {
      background-color: blue;
      height: auto;
    }
    
    .green-column {
      background-color: green;
      height: auto;
    }
    
    .double-col {
      display: flex;
      flex-direction: column;
      flex-basis: 100%;
      flex: 2
    }
    
    .end {
      justify-content: space-between;
    }

<div class='some-page-wrapper'>
    <div class='row'>
    <div class='double-col end'>
      <div class='blue-column'>
        <div class='row'>div</div>
      </div>
       <div class='blue-column'>
        <div class='row' style="background-color: lightblue">
        <div class='col'>COL 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div>
          <div class='col'>COL 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div>
        </div>
      </div>
    </div>
      
    <div class='col'>
      <div class='col'>div 1</div>
      <div class='col'><p>div2</p><p>div2</p><p>div2</p><p>div2</p><p>div2</p></div>
      <div class='col'>COL 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
    </div>
  </div>
  </div>

Answer 1

根据您的问题，目前尚不清楚您的约束是什么。但是，如果您想要具有行和列的类似表格的布局，最好的方法是使用css grid。您对父元素应用了一些规则，如下所示，其子元素会自动重新排列到您定义的表格式布局中。]

请注意，如果您确实要显示表格数据，例如电子表格，则应使用HTML表。仅当您要模拟表的布局时，才使用divs和css网格，但这样做严格是出于布局目的，而不是因为您要呈现语义表格式数据。

.table {
  display: grid;
  /* change the '2' below to adjust number of rows */
  grid-template-rows: repeat(2, 1fr);
  /* change the '3' below to adjust number of columns */
  grid-template-columns: repeat(3, 1fr);
}

/* this can be removed, it's just to show the boxes */
.table > * {
  border: 1px solid black;
}
<div class="table">
    <div>
      one line
    </div>
    <div>
      one line<br>
      two lines
    </div>
    <div>
      one line<br>
      two lines<br>
      three lines
    </div>
    <div>
      one line<br>
      two lines
    </div>
    <div>
      one line<br>
      two lines<br>
      three lines
    </div>
    <div>
      one line
    </div>
</div>