如何在html框中并排放置4个图像和标题和描述

Question

如何将4个图像，标题和描述并排放在html框中？没有链接，只有文字。如下图所示：

Answer 1

Flex盒子是要走的路：

https://jsfiddle.net/s1mreoe8/1/

.flex{
  display:flex;
}

以下是指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

＆＃13;

＆＃13;

.first {
    float: left;
    width: 50%;
}
.img {
    float: left;
	width:39%;
	padding:10px;
}
.text
{
	width:39%;
	float: left;
	padding:10px;
}
.img img {
    width: 100%;
}

＆＃13;

<div class="row">
	<div class="first">
    	<div class="img">
        	<img src="http://www.fogosglobo.com.br/img/250x250-circle.png" alt="img">
        </div>
        <div class="text">
        	<p><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Nunc molestie, nibh eu molestie vestibulum, urna neque interdum orci, ut egestas diam massa vel magna. Mauris eget nunc nec sem ultrices varius.</p>
        </div>
    </div>
    <div class="first">
    	<div class="img">
        	<img src="http://www.fogosglobo.com.br/img/250x250-circle.png" alt="img">
        </div>
        <div class="text">
        	<p><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Nunc molestie, nibh eu molestie vestibulum, urna neque interdum orci, ut egestas diam massa vel magna. Mauris eget nunc nec sem ultrices varius.</p>
        </div>
    </div>
  
   
</div>

＆＃13;

＆＃13;

＆＃13;