Как разделить div на две колонки (слева и справа)

Question

Я хочу разделить деление на два столбца, чтобы

в левой части

данные должны быть плавающими: вправо;

в правой части

данные должны быть с плавающей точкой: слева;

Пример 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;
}

Получение выхода

Требуемый вывод

Я упомянул похожий вопрос

Разделение деления на 2 столбца с использованием CSS

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

Комментарии приветствуются

Answer 1

Я бы реструктурировал 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>

Answer 2

Учитывая, что вы не используете какую-либо работу с фреймом css, вы можете достичь этого результата, используя поплавки, посмотрите приведенный ниже фрагмент workimg, надеюсь, он поможет:)

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

Вы должны обернуть свои тексты и использовать 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>