Question

我试图仅通过使用div来制作此表，因为我将在其中使用Angular Components，并且据我所知，它不能与表标签一起使用。

这是我的代码， https://codepen.io/teodora-malec/pen/vQdJPr

我尝试了display: block的月份，千伏特，日期和标签，并且有效，然后尝试了

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

因为我尝试过以下问题的解决方案：How to place two divs next to each other? 看起来像这样

我应该以不同的方式放置div还是我的CSS代码错误？

Answer 1

在使用float时使用“ clearfix”类是一个好习惯。这是链接：What is a 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>

div表不适用于左右浮动

2 个答案: