Question

请查看此jsfiddle代码。

即使我使用了float-right，右列中的元素也逐渐向左移动。

我希望右列与右边框对齐，就像詹金斯（Jenkins）下的第一个值一样。

请提出我想念的东西。

谢谢

Answer 1

在这种情况下，您可能需要在父div中使用text-align: right而不是元素本身的浮点数。 Float通常不用于对齐内容，而是用于对齐该内容的容器。它通常用于布局。在这里，文本对齐更有意义，因为您想对齐文本。

Answer 2

请从“ metrics-content-t2” div标签中删除右浮动，并使用text-align right。

.metric-div-row {
  width: 100%;
  display: flex;
}

.metric-div-row>div {
  flex: 1;
  margin-top: 5px;
  margin-bottom: 2px;
  margin-left: 10px;
  margin-right: 10px;
  /* Adding Border  */
  border-radius: 12px;
  border: 2px solid cadetblue;
  padding: 20px;
  width: 200px;
  height: 150px;
  padding-top: 10px;
  padding-bottom: 30px;
  background-color: white;
}

.all-project-heading {
  width: 100%;
  height: 25px;
  font-size: 18px;
  font-weight: 600;
  color: darkslategray;
}

.metrics-content {
  width: 100%;
  height: 120px;
}

.metrics-content-t1 {
  float: left;
}

.metrics-content-t2 {
  float: right;
  text-align:right;
}

.metrics-heading {
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 500;
}

.metrics-value-small {
  color: #119bc9;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 0px;
  margin-bottom: 5px;
}

.floatRight {
  float: right;
}

<div class="metric-div-row">
  <div class="metric-divs">
    <div class="all-project-heading">
      CI Statistics
    </div>
    <br/>
    <div class="metrics-content">
      <div class="metrics-content-t1">
        <span class="metrics-heading">Deployer</span>
        <br/>
        <a id="ciDeployerCount" class="metrics-value-small">0</a>
        <br/>
        <br/>
        <span class="metrics-heading">GoCD</span>
        <br/>
        <a id="ciGocdCount" class="metrics-value-small">0</a>
        <br/>
        <br/>
        <span class="metrics-heading">Other</span>
        <br/>
        <a id="ciOtherCount" class="metrics-value-small">0</a>
      </div>
      <div class="metrics-content-t2">
        <span class="metrics-heading">Jenkins</span>
        <br/>
        <a id="ciJenkinsCount" class="metrics-value-small">0</a>
        <br/>
        <br/>
        <span class="metrics-heading">TFS</span>
        <br/>
        <a id="ciTfsCount" class="metrics-value-small">0</a>
        <br/>
        <br/>
        <span class="metrics-heading">None</span>
        <br/>
        <a id="ciNoneCount" class="metrics-value-small">0</a>
      </div>
    </div>
  </div>

元素即使向右浮动也向左移动

2 个答案: