如何获得这种效果？

Question

我尝试使用div和bootstrap达到一点。它应该在一行数点和关于点的较小信息，在第二区域应该是引导图标和关于图标的信息。 我的代码：

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row center-block">
      <div class="col-md-5" style="padding: 0px; padding-left: 10px; ">
          <i class="pull-left h2"><h2>72</h2></i> TWOJE PUNKTY
      </div>
      <div class="col-md-7" style="padding: 0px">
          <i class="fa fa-trophy fa-2x pull-left"></i> WYRÓZNIENIE SZYBKI BILL
      </div>
      <br>
      <table class="table">
        <tr>
          <th><h2>72</h2></th>
          <th>you points</th>
          <th><i class="fa fa-trophy fa-2x pull-left"></i></th>
          <th>fastL</th>
        </tr>
      </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试以下代码，您可以根据自己调整col-课程

.flex-div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  align-items: center;
}

.icon-text {
  float: left;
  margin-right: 10px;
  font-size: 34px;
}
.icon-text h2 {
  margin: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row center-block row-eq-height">
      <div class="col-xs-6 flex-div">
        <div class="icon-text">
          <h2>72</h2>
        </div>
        <div class="info-text">
          TWOJE PUNKTY<br/>
          WYRÓZNIENIE SZYBKI BILL
        </div>
      </div>
      
      <div class="col-xs-6 flex-div ">
        <div class="icon-text">
          <i class="glyphicon glyphicon-certificate"></i>
        </div>
        <div class="info-text">
          Your Achivement Reached
        </div>
      </div> 
  </div>
</div>

Answer 2

您可以使用this等功能实现此效果。

HTML：

<div class="points"> 72 </div>
<div class="points-details">
Your 
points
</div>

<div class="icon">+</div>
<div class="icon-details">
Your 
Achievment
Reached
</div>

CSS：

.points{
  display: inline-block;
}
.points-details{
  display: inline-block;
}
.icon{
 margin-left: 20px;
  display: inline-block;
}
.icon-details{
  display: inline-block;
}