如何保持 3列的相同位置？

Question

我有以下CSS和HTML代码来保持相同的3列宽度。CSS文件是

* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 100px;
}

.column2 {
  float: left;
  width: 33.33%;
  padding: auto;
  height: 800px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

html文件是，

<h2>Three Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

现在我需要将所有列标记数据保留在相同的位置。如何使用CSS文件执行此操作？编辑屏幕截图![some screen shot ]1

Answer 1

我不确定我是否理解这个问题。如果要使列项目彼此相邻而不是在同一水平线上，为什么要使用“行” div？屏幕快照中的示例仅使用3列div。

* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

.column2 {
  float: left;
  width: 33.33%;
  padding: auto;
  height: 800px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<h2>Three Equal Columns</h2>


  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>

    <h2>Title</h2>
    <p>Some text.. </p>

   <h2>Title longer</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus feugiat porta. Curabitur dui est, bibendum in nisl quis, tempor dictum nisi. Nam vel aliquam ligula. In eget nunc odio. Aenean ornare elit sed augue sodales consectetur. Nam sagittis leo nunc, sit amet consectetur lorem dignissim sed. Praesent hendrerit massa orci, et gravida mauris porta vel. Morbi eget efficitur augue. Nullam id magna id magna finibus blandit sit amet eu tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tincidunt enim id finibus pretium. In varius elit hendrerit, tempor magna in, vehicula turpis.</p>
    <h2>Title</h2>
    <p>Some text.. </p>
  </div>
  
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus feugiat porta.</p>
     <h2>Title</h2>
    <p>Some text..</p>
        <h2>Title</h2>
    <p>Some text..</p>
        <h2>Title</h2>
    <p>Some text..</p>
        <h2>Title Medium</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus feugiat porta. Curabitur dui est, bibendum in nisl quis, tempor dictum nisi. Nam vel aliquam ligula. In eget nunc odio. Aenean ornare elit sed augue sodales consectetur. Nam sagittis leo nunc, sit amet consectetur lorem dignissim sed. Praesent hendrerit massa orci, et gravida mauris porta vel. Morbi eget efficitur augue. Nullam id magna id magna finibus blandit sit amet eu tortor. </p>
  
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
        <h2>Title Short</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus feugiat porta. Curabitur dui est, bibendum in nisl quis, tempor dictum nisi. Nam vel aliquam ligula. In eget nunc odio. Aenean ornare elit sed augue sodales consectetur. Nam sagittis leo nunc, sit amet consectetur lorem dignissim sed. Praesent hendrerit massa orci, et gravida mauris porta vel. Morbi eget efficitur augue. Nullam id magna id magna finibus blandit sit amet eu tortor. </p>
        <h2>Title</h2>
    <p>Some text..</p>
        <h2>Title Shorter</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus feugiat porta. Curabitur dui est, bibendum in nisl quis, tempor dictum nisi. Nam vel aliquam ligula. In eget nunc odio. Aenean ornare elit sed augue sodales consectetur.</p>
        <h2>Column 3</h2>
    <p>Some text..</p>
  </div>