我不知道如何制作这个3列布局

Question

我对这个3列布局有问题。我尝试了一些东西，但出了问题。 你能帮我吗？我不知道该怎么办。如果您能提供帮助，我会很高兴。Adress和开放时间之间的差距如此之大，我也不知道如何将更多的日子和开放时间移到右边。现在它不清楚，凌乱。 例子： https://i.sstatic.net/msvh7.png

我的代码：

  <div class="container">
    <div class="columnn">
    <p> 
      Ruckholt Road 28</br>
      Leyton London</br>
      United Kingdom</br>
    </p>
    </div>
    <div class="columnn">
    <p>     
      Monday</br>
      Tuesday</br>
      Wednesday</br>
      Thursday</br>
      Friday</br>
      Saturday</br>
      Sunday</br>
    </p>
    </div>
    <div class="columnn">
    <p>
      11:00 - 15:30</br>
        12:00 - 18:00</br>
        Closed</br>
        12:00 - 18:00</br>
        11:00 - 14:30</br>
      Closed</br>
        Closed</br>
    </p>
    </div>
 </div>

  .columnn {
      flex: 33.33%;
      padding: 0px;
      margin: 0px;
    }
    .container {
    font-size: 20px;
    text-align: center;
    margin: 0 30%;
       display: flex;
    }

Answer 1

我没有完全理解您的问题，但也许是这样的？

   <div class="container">
  <div class="columnn">
    <p>
      Ruckholt Road 28</br>
      Leyton London</br>
      United Kingdom</br>
    </p>
  </div>
  <div class="columnn">
    <h3> Opening Hours </h3>
    <p>
      Monday</br>
      Tuesday</br>
      Wednesday</br>
      Thursday</br>
      Friday</br>
      Saturday</br>
      Sunday</br>
    </p>
  </div>
  <div class="columnn">
    <p>
      11:00 - 15:30</br>
      12:00 - 18:00</br>
      Closed</br>
      12:00 - 18:00</br>
      11:00 - 14:30</br>
      Closed</br>
      Closed</br>
    </p>
  </div>
</div>

    .container {
  border: 1px solid blue;
  font-size: 20px;
  text-align: left;
  margin: 0 30%;
  display: flex;
  align-items: center;
}

.columnn {
  flex: 33.33%;
  padding: 0px;
  margin: 0px;
  border: 1px solid red;
  &:last-child {
    margin: 9% 0 0 0;
    text-align: right;
  }
}

Answer 2

也许是这样的？这是您提供的代码的基础。让我知道

.columnn {
      padding: 0px;
      margin: 0px;
    }



.col-2 {
    display: flex;
    justify-content:space-evenly; 
    grid-gap:20px;
   
    }

.col-1 {
    display: grid;
    }

.container {
    font-size: 20px;
    text-align: left;
    margin: 0 auto;
    display: flex;
    justify-content:space-evenly;
    }

<div class="container">
    <div class="columnn">
    <h2> Contact Information </h2>
     <div class="col-1">
      <p> 
      Ruckholt Road 28<br>
      Leyton London<br>
      United Kingdom
      </p>
     </div>
    </div>
    

         
    <div>
    <h2> Hours Open </h2>
      <div class="col-2">
      <p>     
      Monday<br>
      Tuesday<br>
      Wednesday<br>
      Thursday<br>
      Friday<br>
      Saturday<br>
      Sunday
      </p>

      <p>
      11:00 - 15:30<br>
      12:00 - 18:00<br>
      Closed<br>
      12:00 - 18:00<br>
      11:00 - 14:30<br>
      Closed<br>
      Closed
      </p>
    </div>
    
 </div>
  </div>