div 表不適用於左右浮動

Question

我試圖僅通過使用 div 來制作此表格，因為我將在其中使用 Angular 組件，而且據我所知，它不適用於表格標記。

這是我現在的代碼， https://codepen.io/teodora-malec/pen/vQdJPr

我試過display: block for month、kv、date 和 tag 並且它起作用了，然后我試過了

<div class="wrapper">
      <div class="left">
          <label class="month">MONTH</label>
      </div>
      <div class="right month-name">
          <label> MONTH-NAME & YEAR </label> 
      </div>
  </div>

因為我嘗試了這個問題的解決方案： 如何將兩個 div 並排放置？ 它看起來像這樣

我應該以不同的方式放置 div 還是我的 css 代碼是錯誤的？

Answer 1

在玩浮動時使用類“clearfix”是一個很好的做法。 這是鏈接： 什么是clearfix？

其次，您的結構需要稍作修改以獲得更好/更高效的編碼。 雖然我已經在提供的解決方案中調整了您的需求，但我的建議是再次檢查您的結構設計。 這是工作演示： https : //jsfiddle.net/posywj78/

html

<div class="month-header">
  <div class="wrapper clearfix">
      <div class="left">
          <label class="month">MONTH</label>
      </div>
      <div class="right month-name">
          <label> MONTH-NAME & YEAR </label> 
      </div>
  </div>
  <div class="wrapper clearfix">
      <div class="left">
          <label class="kw">KV</label>
      </div>
      <div class="right">
  
      </div>
  </div>
    <div class="wrapper clearfix">
        <div class="left">
            <label class="date">DATE</label>
         </div>
         <div class="right">

         </div>
    </div>
    <div class="wrapper clearfix">
        <div class="left">
            <label class="tag">TAG</label>
        </div>
        <div class="right">

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

Answer 2

您應該使用以下樣式。

<style>
.month, .kw, .date, .tag {
    display: flex;
    flex-direction:column;
}
.wrapper {
    display: flex;
}
</style>