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

Question

我想把 div 分成两列这样

在左侧

数据必须是浮点数：对；

右侧

数据必须是浮点数：left;

示例 HTML 代码

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

css 类

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

获取输出

期望的输出

我已经提到了类似的问题

Split Div Into 2 Columns Using CSS

和http://www.cssdesk.com/d64uy

非常感谢评论

Answer 1

考虑到您没有使用任何 css 框架，然后使用浮点数可以达到该结果，请查看下面的 workimg sn-p，希望对您有所帮助:)

.text-center {
  text-align: center;
}

.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;
  float: left;
  clear: both;
  width: 35%;
  line-height: 28px;
  margin-bottom: 20px;
  text-align: right;
}

.graph_bar_button{
  height: 28px;
  max-width: 200px;
  margin-left: 22px;
  float: left;
  width: 200px;
  border: none;
  background: none;
}

.graph_bar_percentage {
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #ffffff;
  box-shadow: 0 9px 54px 0 rgba(66, 133, 244, 0.37);
  border-radius: 12.5px;
  background-color: #4285f4;
  display: block;
}

<div class="text-center">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="graph_bar_text">
    iOS
  </div>
  <div class="text-left">
    <button class="graph_bar_button">
      <span class="graph_bar_percentage" style="width: 90%">
        90%
      </span>
    </button>
  </div>

  <div class="graph_bar_text">
    Android
  </div>
  <div class="text-left">
    <button class="graph_bar_button">
      <span class="graph_bar_percentage" style="width: 20%">
        20%
      </span>
    </button>
  </div>

  <div class="graph_bar_text">
    Angular
  </div>
  <div class="text-left">
    <button class="graph_bar_button">
      <span class="graph_bar_percentage" style="width: 50%">
        50%
      </span>
    </button>
  </div>
</div>

Answer 2

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

.row {
  display: flex;
  align-items: center;
}

.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;
  text-align: right;
  width: 100px;
}

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

<div class="text-center">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="row">
    <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>
    <div class="row">
    <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>
    <div class="row">
    <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>
</div>

Answer 3

我会重组 HTML，将标签放在 flex 列中，将图表放在单独的 flex 列中。 浮点数不是必需的，这意味着文档流保持不变。

.container {
  text-align: center;
}

.graphs {
  display: flex;
  width: 100%;
  justify-content: center;
}

.graph_bar_text {
  display: flex;
  flex-direction: column;
  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_text p {
  margin: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.graph_bar {
  display: flex;
  flex-direction: column;
}

.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: 15px;
}

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

<div class="container">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="graphs">
    <div class="graph_bar_text">
      <p>iOS</p>
      <p>Android</p>
      <p>Angular</p>
    </div>
    <div class="graph_bar">
      <button mat-button class="graph_bar_button">
       <span class="graph_bar_percentage">10%</span>
      </button>
      <button mat-button class="graph_bar_button">
        <span class="graph_bar_percentage">10%</span>
      </button>
      <button mat-button class="graph_bar_button">
        <span class="graph_bar_percentage">10%</span>
      </button>
    </div>
  </div>
</div>