Question

文本如何环绕按钮。按钮应该在右侧，与文本内嵌。我使用了 float 但它不适用于我的解决方案

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="product-item py-3 clearfix">
  <div>
    <p class="mb-0">Edu USA E-mails EDU e-mail accounts with GMAIL interface. You should login through </p>
  </div>
  <div class="float-right">
    <span class="badge badge-success mr-1">Buy</span>
    <span class="badge badge-primary mr-1">3402</span>
    <span class="badge badge-primary ">$8.40</span>
  </div>
</div>

Answer 1

试试：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="product-item py-3 clearfix">
  <div class="float-right">
    <span class="badge badge-success mr-1">Buy</span>
    <span class="badge badge-primary mr-1">3402</span>
    <span class="badge badge-primary ">$8.40</span>
  </div>
  <div>
    <p class="mb-0">Edu USA E-mails EDU e-mail accounts with GMAIL interface. You should login through </p>
  </div>

</div>

Answer 2

这是您要找的吗？ （不提供评论的片段）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="product-item py-3 clearfix d-flex align-items-center">
  <div>
    <p class="mb-0">Edu USA E-mails EDU e-mail accounts with GMAIL interface. You should login through </p>
  </div>
  <div class="float-right">
    <span class="badge badge-success mr-1">Buy</span>
    <span class="badge badge-primary mr-1">3402</span>
    <span class="badge badge-primary ">$8.40</span>
  </div>
</div>

在按钮周围环绕文本

2 个答案: