Question

我正在尝试在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>

{{1}}

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>

Answer 2

这是因为.prices有float。 Explanation of the problem

将以下内容添加到您的CSS中（著名的css类的clearfix）-

.description:after {
    content: "";
    display: table;
    clear: both;
}

.description {
  border: 1px solid;
}

.description:after {
    content: "";
    display: table;
    clear: both;
}

.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>

<div>元素超出边框

2 个答案: