我不知道如何制作這3列布局-有解無憂

我對這 3 列布局有疑問。我嘗試了一些東西，但它出錯了。你能幫我解決這個問題嗎？我不知道該怎么辦了。如果你能提供幫助，我會很高興。地址和開放時間之間的差距太大了，我也不知道如何將更多的天數和開放時間向右移動。現在它不清楚而且很亂。示例： https ://i.stack.imgur.com/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;
    }

uj5u.com熱心網友回復：

我沒有完全理解你的問題，但也許是這樣的？
https://codepen.io/i-empty/pen/abEejeQ?editors=1100

   <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;
  }
}

uj5u.com熱心網友回復：

你可以試試：

.container{
  display: flex;
  justify-content: space-evenly;
}

下面的一個例子：

body{
  background: #d54343;
  color: white;
}
.container{
  display: flex;
  justify-content: space-evenly;
}
.column{
  display: flex;
}
.opening{
  position: absolute;
}
.col-2{
  margin-right: 40px;
  font-weight: bold;
}
.col-3{
  margin-top: 45px;
}

<body>
  <div class="container">
    <div class="col-1">
    <h3>Contact info</h3>
    <p> 
      Ruckholt Road 28</br>
      Leyton London</br>
      United Kingdom</br>
    </p>
    </div>
    <div class="column">
      <div class="col-2">
        <h3>Opening</h3>
        <p>     
          Monday</br>
          Tuesday</br>
          Wednesday</br>
          Thursday</br>
          Friday</br>
          Saturday</br>
          Sunday</br>
        </p>
      </div>
      <div class="col-3">
        <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>
 </div>
</body>

uj5u.com熱心網友回復：

也許是這樣的？？這是基于您提供的代碼。讓我知道

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



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


.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>
    <p> 
      Ruckholt Road 28<br>
      Leyton London<br>
      United Kingdom
    </p>
    </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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/466340.html

標籤：javascript html css 布局多列

上一篇：想要獲取值匹配的其他串列的值

下一篇：無法使背景使100%高度回應