如何将 4 张图片以及标题和描述并排放入 html 框中
How put 4 images and title and description side by side in a html box
如何将 4 张图片以及标题和描述并排放在 html 框中?没有 link,只有文字。如下图:
Flex 盒子是可行的方法:
https://jsfiddle.net/s1mreoe8/1/
.flex{
display:flex;
}
这是指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.first {
float: left;
width: 50%;
}
.img {
float: left;
width:39%;
padding:10px;
}
.text
{
width:39%;
float: left;
padding:10px;
}
.img img {
width: 100%;
}
<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>
如何将 4 张图片以及标题和描述并排放在 html 框中?没有 link,只有文字。如下图:
Flex 盒子是可行的方法:
https://jsfiddle.net/s1mreoe8/1/
.flex{
display:flex;
}
这是指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.first {
float: left;
width: 50%;
}
.img {
float: left;
width:39%;
padding:10px;
}
.text
{
width:39%;
float: left;
padding:10px;
}
.img img {
width: 100%;
}
<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>