텍스트 블록 옆에있는 이미지 용 CSS 휴대 전화

이 작업을 수행하는 가장 좋은 방법은 무엇입니까?텍스트 블록 옆에있는 이미지 용 CSS 휴대 전화

전폭 행 (320px)입니다. 160px는 한쪽면에있는 이미지이고 나머지 160px는 텍스트 용으로 예약되어 있습니다. 단순한 부유물입니까 아니면 덜 파괴적인 방식입니까?

 <div class="two-up_img u-pull-right"> 
      <figure> 
       <img src="../img/img.jpg"> 
      </figure> 
     </div> 

     <div class="two-up_info"> 
      <div class="inner"> 
       <h4 class="highlight">Rob</h4> 
       <div class="small"> 
        <p>Landing Page</p> 
        <p>Brand Identity</p> 
       </div> 
      </div> 
     </div>

나는 u-pull-right 어디에서 오는지이다 해골 (http://getskeleton.com/)라는 프레임 워크를 사용하고

.two-up_info { 
    height: 160px; 
    background: #fff; 
} 

.two-up_info .inner { 
    text-align: center; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.two-up_img { 
    max-width: 50%; 
}

CSS. 요소를 오른쪽으로 띄웁니다.

출처

2017-02-19 Matthew Gelfand