この特定のデザインでこれらの要素を配置する最も良い方法は何ですか？私のコードは今あるのはここ

Question

は次のとおりです。ここで

link

は私が達成しようとしているデザインです。

Picture of design

しかし方法I Iは、相対位置とマージンを試してみました私のページの応答性が損なわれてしまった。上記のデザインでこれらの要素を配置する最善の方法は何ですか？画面サイズの変更にウェブページを適応させることは可能ですか？

Answer 1

レスポンシブなデザインを得るためにブートストラップを使用できます。ブートストラップを使用するときは、グリッドシステムを使用して要素を管理できます。クラス "行"は12等分の列に分割されたグリッドを取得します。あなたはあなたの要素の位置を決めるためにcol-md-x/col-sm-xを使うことができます。詳細はhttp://getbootstrap.com/css/を参照してください。言い換えれば、画像を表示するcol-md-3と情報を表示するcol-md-9を使用します。それが動作します。ちょうど参照用

例：スタックオーバーフローへ

<div class="row"> 
    <div class="col-md-3"> 
     <img /> <-- put your image here --> 
    </div> 
    <div class="col-md-9"> 
     <-- put your texthere --> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-9"> 
     <-- put your texthere --> 
    </div> 
    <div class="col-md-3"> 
     <img /> <-- put your image here -->   
    </div> 
</div>