css - 元素落在边界之外

Question

我正在尝试绘制黑色边框Test1-Test4也可以跨越Test5. 此刻，Test5落在外面。有谁知道如何绘制它以包含Test5？

.description {
  border: 1px solid;
}

.descriptionTop {
  display: inline-block;
}

.ao {
  padding: 5px;
  font-weight: 700;
  text-transform: uppercase;

}

.pr {
  text-align: right;
  float: right;
}

.pm {
  border: solid 1px #53a318;
  border-radius: 3px;
  color: #53a318;
  box-sizing: border-box;
  font-size: 12px;
  float: right;
  padding: 2px 8px;
}

<div class="description">
  <div class="descriptionTop">
    <span class="descriptionLeft">Test1</span>
    <span class="ao">Test2</span>
  </div>
  <div class="pr">
    <div>
      <span>Test3</span>
      <span>Test4</span>
    </div>
    <div class="pm">Test5</div>
  </div>
</div>

标签： css

Answer 1

添加overflow: auto;到容器以包含浮动元素：

.description {
  border: 1px solid;
  overflow: auto;
}

.descriptionTop {
  display: inline-block;
}

.altOffer {
  padding: 5px;
  font-weight: 700;
  text-transform: uppercase;

}

.prices {
  text-align: right;
  float: right;
}

.promotion {
  border: solid 1px #53a318;
  border-radius: 3px;
  color: #53a318;
  box-sizing: border-box;
  font-size: 12px;
  float: right;
  padding: 2px 8px;
}

<div class="description">
  <div class="descriptionTop">
    <span class="descriptionLeft">Test1</span>
    <span class="altOffer">Test2</span>
  </div>
  <div class="prices">
    <div>
      <span>Test3</span>
      <span>Test4</span>
    </div>
    <div class="promotion">Test5</div>
  </div>
</div>