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

时间：2018-10-03 11:46:25

标签： html css angular html5

我想将div分为两列，以使

  

在左侧

数据必须为float：正确；

  

在右侧

数据必须为float：左；

  

示例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;
}

获取输出

enter image description here

所需的输出

enter image description here

我已经提到了类似的问题

Split Div Into 2 Columns Using CSS

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

非常感谢您的评价

3 个答案:

答案 0 :(得分：1)

您必须包装文本并使用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>

答案 1 :(得分：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>

答案 2 :(得分：1)

考虑到您没有使用任何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>

相关问题
最新问题