وضع اكثر من صورة افقيا داخل div بال html والتعديل علية بالcss

يمكنك إنشاء وسم div بهذا الشكل 

<div class="items">
  <div class="box">
    <div class="box-header">
      <h3>title</h3>
    </div>
    
    <div class="box-body">
      <img src="image1.png" />
    </div>
    <div class="box-footer">
    	<p>Description here</p>
    </div>
  </div>  
  
  <div class="box">
    <div class="box-header">
      <h3>title</h3>
    </div>
    
    <div class="box-body">
      <img src="image1.png" />
    </div>
    <div class="box-footer">
    	<p>Description here</p>
    </div>
  </div>  
  
  <div class="box">
    <div class="box-header">
      <h3>title</h3>
    </div>
    
    <div class="box-body">
      <img src="image1.png" />
    </div>
    <div class="box-footer">
    	<p>Description here</p>
    </div>
  </div>  
  
  <div class="box">
    <div class="box-header">
      <h3>title</h3>
    </div>
    
    <div class="box-body">
      <img src="image1.png" />
    </div>
    <div class="box-footer">
    	<p>Description here</p>
    </div>
  </div>  
<div>

ثم نستخدم flexbox و لجعل العناصر بجانب بعض نختار الخاصية display: flex ليتم وضع العناصر بجانب بعضها مثل 

.items{
	display: flex;
}

.items .box{
  border: 2px solid #CCC;
  margin: 5px 20px; 
}

و قمنا باستخدام الخاصية margin لجعل هوامش من الجهات الأربعة للصناديق التي تحتوي على العناصر المتمثلة في العنصر box .