列不在同一位置

Question

我要在页面顶部添加一个包含5列的菜单。列之一是图像，四列是段落。带有图像的列比我的段落列高。

我有一列布局，其中5列具有相等的宽度。我指定了图片和段落的height属性，指定了div的最高位置，但这并不能解决问题。我应该在代码中添加什么？

    * {
      box-sizing: border-box;
    }

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

    [class*="col-"] {
      float: left;
      
    }

    .col-1 {width: 10%;}
    .col-2 {width: 20%;}
    .col-3 {width: 30%;}
    .col-4 {width: 40%;}
    .col-5 {width: 50%;}
    .col-6 {width: 60%;}
    .col-7 {width: 70%;}
    .col-8 {width: 80%;}
    .col-9 {width: 90%;}
    .col-10 {width: 100%;}

    div.banner {
    width:92%;
    max-height:40px;
    font-size:1.5vw;
    color: white;
    background-color: white;
    position: relative;
    top: 0px;
    }
    <div class="row">

    	<div class="col-2 menu">
    	<div class="banner">
    	
    	<img src=image.jpg" style="width:92%;max-height:40px;" />
    	
    	</div>
    	</div>
    	
    	



      <div class="col-2 menu">
      <div class="banner">
     <a href="home.html">
    	
    	<p> Home </p>
    	
    	</a>
      </div>
      </div>

      <div class="col-2">
       	
    	<div class="banner">
     <a href="uploaden.html">
    	
    	<p> Uploaden </p>
    	
    	</a>
      </div>
      </div>
      
      <div class="col-2 menu">
      <div class="banner">
         <a href="faq.html">
    	<p> FAQ </p>
    	</a>
      </div>
      </div>

      <div class="col-2">
      <div class="banner">
        <a href="contact.html">
    	
    	<p> Contact </p>
    	
    	</a>
      </div>
     <br> 
     <br> 
    <br> 
     </div>




   * {
  box-sizing: border-box;
}

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

[class*="col-"] {
  float: left;

}

.col-1 {width: 10%;}
.col-2 {width: 20%;}
.col-3 {width: 30%;}
.col-4 {width: 40%;}
.col-5 {width: 50%;}
.col-6 {width: 60%;}
.col-7 {width: 70%;}
.col-8 {width: 80%;}
.col-9 {width: 90%;}
.col-10 {width: 100%;}

div.banner {
width:92%;
max-height:40px;
font-size:1.5vw;
color: white;
background-color: white;
position: relative;
top: 0px;
}


<div class="row">

    <div class="col-2 menu">
    <div class="banner">

    <img src="plaatjes/Logo Drechtsteden 4.jpg" style="width:92%;max-height:40px;" />

    </div>
    </div>





  <div class="col-2 menu">
  <div class="banner">
 <a href="home.html">

    <p> Home </p>

    </a>
  </div>
  </div>

  <div class="col-2">

    <div class="banner">
 <a href="uploaden.html">

    <p> Uploaden </p>

    </a>
  </div>
  </div>

  <div class="col-2 menu">
  <div class="banner">
     <a href="faq.html">
    <p> FAQ </p>
    </a>
  </div>
  </div>

  <div class="col-2">
  <div class="banner">
    <a href="contact.html">

    <p> Contact </p>

    </a>
    </div>
   <br> 
   <br> 
   <br> 
   </div>