html - 在页面中重叠两个单独的 div

Question

我正在尝试构建一个带有按钮和面板的页面。该代码以可重用的方式构建，因为此按钮将在多个页面中使用。但是，在特定页面中，我们有一个显示信息的面板，现在他们想在面板标题内显示此按钮。谁能帮助我使用 CSS 将这两个 div 合并到一个单独的页面中。

当前:

期望:

按钮代码:

<div>
  <p class=""><span class="fa fa-star"></span>Mark Read</p>
</div>

面板代码:

<div class="container">

  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

Answer 1

你可以将它移到标题中并删除 div

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="panel panel-default">

    <div class="panel-heading">
      <p class=""><span class="fa fa-star"></span>Mark Read</p>Panel Heading</div>
    <div class="panel-body">Panel Content</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>