在按钮周围环绕文本答案

【问题标题】：Wrap text around the buttons在按钮周围环绕文本
【发布时间】：2021-07-14 05:04:00
【问题描述】：

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

<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>

【问题讨论】：

如果你想让它们内联，只需将<span>s 移动到第一个<div>。
将按钮div移到段落div之前

标签： html css bootstrap-4

【解决方案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>

【讨论】：

这会使文本顶部的按钮不与文本内联

【解决方案2】：

这是你要找的吗？ （sn-ps 没有评论）

<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>

【讨论】：

这些按钮不应该换行
如果文本较少时按钮不向右浮动
@IhtishamKhan float 不再有任何效果，因为父级是一个弹性框，所以它们粘在文本的末尾：你需要它们总是在右边吗？如果是，请再次查看 bootsrap 的文档以找出您需要的类。他们应该保持在一行，然后再一次，d-flex 类可以用来把他们变成 flex 孩子。这个答案是关于一个带有工作示例的评论，可以让您走上正轨。如果学习 CSS 对您来说太长，您必须学习一些引导程序的基础知识才能使用它；）