難度對齊文本元素

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>