タイトルとイメージを左揃えにしてテキストを右揃えにしてリストを作成しますか？

Question

私は最善かつクリーンな方法は何

画像で1のようなレイアウトを作成したいHTMLでレイアウトやCSSでそれを行うためのクリーンな方法を作成しますか？あなたの助けを事前にcodepen.io/hafsadanguir/pen/bZQLdL

感謝を:)

Answer 1

私は最高の、あなたが表示しているもののような結果を達成するためのクリーンな方法がでていると思う：私が試してみました何これブートストラップを使って次のコードは、私が自分で使うものとしてあなたが示しているもののような構造体です。

<div class="container" id="container"> 
    <div class="row"> 
    <div class="col-sm-1"> 
     <div class="img" id="imgOne"></div> 
    </div> 
    <div class="col-sm-2"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
    </div> 
    <div class="col-sm-9"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-1"> 
     <div class="img" id="imgTwo"></div> 
    </div> 
    <div class="col-sm-2"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
    </div> 
    <div class="col-sm-9"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-1"> 
     <div class="img" id="imgThree"></div> 
    </div> 
    <div class="col-sm-2"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
    </div> 
    <div class="col-sm-9"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-1"> 
     <div class="img" id="imgFour"></div> 
    </div> 
    <div class="col-sm-2"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
    </div> 
    <div class="col-sm-9"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p> 
    </div> 
    </div> 
</div> 

はCSS：

#container { 
    background: red; 
} 
.img{ 
    height: 50px; 
    background: green; 
} 
#container .row { 
    margin-bottom: 15px; 
} 
#container h1 { 
    margin: 0; 
} 
#imgOne { 
    background-image: url(#your_image_path); 
} 
#imgTwo { 
    background-image: url(#your_image_path); 
} 
#imgThree { 
    background-image: url(#your_image_path); 
} 
#imgFour { 
    background-image: url(#your_image_path); 
} 

とjQueryの少しを使用することによって、我々はシャープな正方形の画像をacheaveすることができます。またブートストラップを使用することにより、あなたは複数の画面用

HTMLを応答レイアウトに利益をもたらすだろうコンテナ：

$('.img').height($('.img').width()); 

ドキュメントタグにブートストラップファイルを追加することを忘れないでください。from Here、 あなたの好みに合わせてデザインを調整する必要があります。

AブーツプレビューHereから。