выровнять три изображения рядом с телом сайта

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% (возможно, потребуется изменить это в зависимости от поля и отступы вы давая вашего контейнера и его дочерних элементов)

Он разделит Li элемент в 3 контейнера одинаковой ширины

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