bootstrap如何在一行中创建两个div

Question

我正在尝试根据此图片编写css代码：

但是，我不知道如何在一行中创建两个div，并且很难编写代码使它们完全相同，尝试了很多次。有人可以帮助我吗？

这是我的代码：

<div class="media-card">
   <div class="row">
      <div class="col-sm-4 col-md-4">
         <img class="img-responsive" src="{{ asset('images/twitter-icon-lg.png') }}">
      </div>
      <div class="col-sm-8 col-md-8">
         <div class="media">
            <a class="pull-left" href="#">
            <img class="media-photo" src="{{ asset('images/header.png') }}" alt="...">
            </a>
            <div class="media-body">
               <h4 class="media-heading">Matrix User</h4>
               <p><span class="">@MatrixUser</span></p>
            </div>
         </div>
         <div><span class="">2k followers</span></div>
      </div>
   </div>
   <div>
      <p>Approval required to publish</p>
      <button>Select</button>
   </div>
</div>

这是css部分：

.block-inline {
    display: inline-block;
}

.media-size {
    height: 120px;
    width: 90px;
    border: 1px solid #CCCCCC;
}

.media-photo {
    width: 45px;
}

Answer 1

请尝试下面的代码，并记住媒体类已经在bootstrap中，所以总是使用其他类：

<强> HTML

<div class="media-card">
   <div class="row2">
           <div class="col-sm-4 col-md-4">
                 <img class="img-responsive" src="{{ asset('images/twitter-icon-lg.png') }}">
            </div>
            <div class="col-sm-8 col-md-8 media-right">
                      <a class="pull-left" href="#">
                            <img class="media-photo" src="{{ asset('images/header.png') }}" alt="...">
                      </a>
                   <div class="media-body">
                       <h4 class="media-heading">Matrix User</h4>
                        <p><span class="">@MatrixUser</span></p>
                    </div>

              <span class="">2k followers</span>
            </div>
   </div>
   <p>Approval required to publish</p>
   <button>Select</button>
</div>

<强> CSS

.row2{
    overflow:hidden;
}

.media-card{
    width:630px;
    background:#F7F7F7;
}

.media-card div{
    border:1px solid #ccc;
}

.media-right{
    padding-left:0px;
    padding-right:0px;
}

.block-inline {
    display: inline-block;
}

.media-size {
    height: 120px;
    width: 90px;
    border: 1px solid #CCCCCC;
}

.media-photo {
    width: 45px;
}