テキストブロックの横にある画像用のCSS携帯電話

Question

これを行うにはどのような方法が最適ですか？

私は全幅の列（320ピクセル）を持っています。 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> 

CSS

.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%; 
} 

私はu-pull-rightはどこから来るのであるスケルトン（http://getskeleton.com/）と呼ばれるフレームワークを、使用しています。要素を右に浮かべます。

Answer 1

あなたのhtmlを親のdivにラップして、のスタイリングをその親のdivに適用したいとします。

このフィドルを参照してください：https://jsfiddle.net/5gkzh2pa/

それとも、あなたは古いブラウザのサポートを懸念していない場合は、フレキシボックスを見てみましょう：https://css-tricks.com/snippets/css/a-guide-to-flexbox/