难以对齐文本元素

Question

如何对齐div元素如下：

目前它看起来像这样：

到目前为止，这是我的代码：

HTML

<div class="container" ng-hide="hidden == true" ng-animate="'fade'">
  <div class="fb-profile">
    <img align="left" class="fb-image-lg" src="http://lorempixel.com/850/280/nightlife/5/" alt="Profile image example" />
    <img align="left" class="fb-image-profile thumbnail" src="http://lorempixel.com/180/180/people/9/" alt="Profile image example" />
    <div class="fb-profile-text">
      <h1>Anna's Hair Salon</h1>
      <i class="icon ion-star energized" ng-repeat="i in [1, 2, 3, 4]"></i><i class="icon ion-star dark" ng-repeat="i in [1]"></i> 362 reviews
      <br>0.5 miles away &bull; £££
    </div>
  </div>
</div>

CSS

.container {
  padding-bottom: 1em;
  background-color: #fff;
}

.fb-profile img.fb-image-lg {
  z-index: 0;
  width: 100%;
  margin-bottom: 10px;
}

.fb-image-profile {
  margin: -90px 10px 0px 50px;
  z-index: 9;
  width: 20%;
  border: 3px solid #F2F2F2;
}

.fb-profile-text > h1 {
  font-weight: 700;
  font-size: 1.5em;
  margin-bottom: 0.5px;
}

.fb-image-profile {
  margin: -45px 10px 0px 10px;
  z-index: 9;
  width: 20%;
}

小提琴：https://jsfiddle.net/7w7ue4gd/

Answer 1

尝试将班级fb-profile-text的显示更改为inline-block

.fb-profile-text{
    display:inline-block;
}

.fb-profile-text{
  display:inline-block;
}
.container {
  padding-bottom: 1em;
  background-color: #fff;
}

.fb-profile img.fb-image-lg {
  z-index: 0;
  width: 100%;  
  margin-bottom: 10px;
}

.fb-image-profile {
  margin: -90px 10px 0px 50px;
  z-index: 9;
  width: 20%; 
  border: 3px solid #F2F2F2;
}

.fb-profile-text > h1 {
  font-weight: 700;
  font-size: 1.5em;
  margin-bottom: 0.5px;
}

.fb-image-profile {
  margin: -45px 10px 0px 10px;
  z-index: 9;
  width: 20%; 
}

<div class="container" ng-hide="hidden == true" ng-animate="'fade'">
    <div class="fb-profile">
        <img align="left" class="fb-image-lg" src="http://lorempixel.com/850/280/nightlife/5/" alt="Profile image example"/>
        <img align="left" class="fb-image-profile thumbnail" src="http://lorempixel.com/180/180/people/9/" alt="Profile image example"/>
        <div class="fb-profile-text">
            <h1>Anna's Hair Salon</h1>
            <i class="icon ion-star energized" ng-repeat="i in [1, 2, 3, 4]"></i><i class="icon ion-star dark" ng-repeat="i in [1]"></i> 362 reviews<br>0.5 miles away &bull; £££
        </div>
    </div>
</div>