在網站正文中並排排列三個圖像

Question

我在將我的網站主頁上的3個圖像與文本並排排列時出現問題。前兩張圖像完全對齊並居中，但最後一張圖像不會移動並落下。相反，它會落在我頁面上其他圖像的左側。這裏是我使用的代碼：

HTML

.picture_row li { 
 
    float: left; 
 
    display: inline; 
 
    font-family: "Arial"; 
 
}

<div class="picture_row"> 
 
    <ul> 
 
    <li> 
 
     <h3>Custom Web Designs</h3> 
 
     <img src="http://lorempixel.com/300/250" width="400" height="250" /> 
 
     <h5>Represent your business with a Custom Web Design.</h5> 
 
    </li> 
 

 
    <li> 
 
     <h3>Responsive Web Designs</h3> 
 
     <img src="http://lorempixel.com/300/250" width="400" height="250" /> 
 
     <h5>Responisve Web Design allows for better viewing experience on mobile devices</h5> 
 
    </li> 
 

 
    <li> 
 
     <h3>Affordable Pricing</h3> 
 
     <img src="http://lorempixel.com/300/250" width="300" height="250" /> 
 
     <h5>Our competitive pricing lets you stay within your budget while gettting quality custom design work.</h5> 
 
    </li> 
 
    </ul> 
 
</div>

我有第三個標題負擔得起的價格

感謝您的任何幫助的麻煩提前

Answer 1

這個CSS添加到您的代碼 第一容器的寬度設定爲100％

.picture_row{ 
    width:100%; 
} 

然後每個coloumn設置爲％左右30（你可能需要這個取決於margin和padding你調整讓您的容器和子元素）

將劃分li元素分成相等寬度的3容器

.picture_row li{ 
    float:left; 
    display: inline; 
    font-family: "heiti sc" 
    width:30%; 
}