Css 如何将div分成两列（左侧和右侧）

我想把div分成两列，这样

在左边

数据必须是浮动的：对

在右边

数据必须为浮动：左

示例Html代码

获取输出

期望输出

我已提过类似的问题

及

---

非常感谢您的评论

您必须包装您的文本并使用flex

.row{
显示器：flex；
对齐项目：居中；
}
.graph\u bar\u文本{
字体系列：AvenirNext；
字体大小：13px；
字号：500；
字体风格：普通；
字体拉伸：正常；
线高：正常；
字母间距：0.1px；
颜色：#9b9b9b；
文本对齐：右对齐；
宽度：100px；
}
.graph_bar_按钮{
高度：28px；
最大宽度：200px；
盒影：0 9px 54px 0 rgba（6613244,0.37）；
边界半径：12.5px；
背景色：#4285f4；
左边距：22px；
}
.graph_bar_百分比{
浮动：左；
字体系列：AvenirNext；
字体大小：13px；
字号：500；
字体风格：普通；
字体拉伸：正常；
线高：正常；
字母间距：0.1px；
颜色：#ffffff；
}

每个部门的时间

网间网操作系统
{{g1}}}%
安卓
{{g2}}}%
有棱角的
{{g3}}}%

我会重新构造HTML，将标签放在一列中，将图形放在一个单独的flex列中。 浮动是不必要的，这意味着文档流保持不变

.container{
文本对齐：居中；
}
.图表{
显示器：flex；
宽度：100%；
证明内容：中心；
}
.graph\u bar\u文本{
显示器：flex；
弯曲方向：立柱；
字体系列：AvenirNext；
字体大小：13px；
字号：500；
字体风格：普通；
字体拉伸：正常；
线高：正常；
字母间距：0.1px；
颜色：#9b9b9b；
}
.graph_bar_text p{
保证金：0；
高度：28px；
显示器：flex；
对齐项目：居中；
证明内容：柔性端；
}
.图形工具栏{
显示器：flex；
弯曲方向：立柱；
}
.graph_bar_按钮{
高度：28px；
最大宽度：200px；
盒影：0 9px 54px 0 rgba（6613244,0.37）；
边界半径：12.5px；
背景色：#4285f4；
左边距：15px；
}
.graph_bar_百分比{
字体系列：AvenirNext；
字体大小：13px；
字号：500；
字体风格：普通；
字体拉伸：正常；
线高：正常；
字母间距：0.1px；
颜色：#ffffff；
}

每个部门的时间

iOS

安卓

棱角的

10%
10%
10%

考虑到您没有使用任何css框架，那么使用浮动可以实现该结果，请查看下面的工作代码片段，希望对您有所帮助：）

。文本中心{
文本对齐：居中；
}
.graph\u bar\u文本{
字体系列：AvenirNext；
字体大小：13px；
字号：500；
字体风格：普通；
字体拉伸：正常；
线高：正常；
字母间距：0.1px；
颜色：#9b9b9b；
浮动：左；
明确：两者皆有；
宽度：35%；
线高：28px；
边缘底部：20px；
文本对齐：右对齐；
}
.graph_bar_按钮{
高度：28px；
最大宽度：200px；
左边距：22px；
浮动：左；
宽度：200px；
边界：无；
背景：无；
}
.graph_bar_百分比{
字体系列：AvenirNext；
字体大小：13px；
字号：500；
字体风格：普通；
字体拉伸：正常；
线高：正常；
字母间距：0.1px；
颜色：#ffffff；
盒影：0 9px 54px 0 rgba（6613244,0.37）；
边界半径：12.5px；
背景色：#4285f4；
显示：块；
}

每个部门的时间

网间网操作系统
90%
安卓
20%
有棱角的
50%

感谢您的支持。。。。左侧div浮动：左侧；明确：两者皆有；文本对齐：右对齐；真有魅力

<div class="text-center">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="graph_bar_text" class="text-right">
    iOS
  </div>
  <div class="text-left">
    <button mat-button class="graph_bar_button" [style.width.px]="(g1 * 2)">
      <span class="graph_bar_percentage">
        {{g1}}%
      </span>
    </button>
  </div>

  <div class="graph_bar_text" class="text-right">
    Android
  </div>
  <div class="text-left">
    <button mat-button class="graph_bar_button" [style.width.px]="(g2 * 2)">
      <span class="graph_bar_percentage">
        {{g2}}%
      </span>
    </button>
  </div>

  <div class="graph_bar_text" class="text-right">
    Angular
  </div>
  <div class="text-left">
    <button mat-button class="graph_bar_button" [style.width.px]="(g3 * 2)">
      <span class="graph_bar_percentage">
        {{g3}}%
      </span>
    </button>
  </div>
</div>

.graph_bar_text{
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #9b9b9b;
}

.graph_bar_button{
  height: 28px;
  max-width: 200px;
  box-shadow: 0 9px 54px 0 rgba(66, 133, 244, 0.37);
  border-radius: 12.5px;
  background-color: #4285f4;
  margin-left: 22px;
}

.graph_bar_percentage{
  float: left;
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #ffffff;
}