創建標題和圖像左對齊和文本右對齊的列表？

Question

我想創建像一個圖像

什麼是最好的和乾淨的方式創建HTML佈局和做在CSS最乾淨的方式佈局？這是我曾嘗試：codepen.io/hafsadanguir/pen/bZQLdL

在此先感謝您的幫助:)

Answer 1

我認爲最好的，並實現像你展示什麼是結果最徹底的方法使用Bootstrap。下面的代碼是針對你展示的結構，以及我將用於自己的結構。此外，通過使用引導你多屏幕的

受益響應式佈局

HTML：

<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鋒利的方形圖像容器：

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

請記住在文檔標記中添加Bootstrap文件，from Here, 你需要調整你的awn偏好設計。

Bootply Preview from Here。