如何将4张照片并排排列，以及它们下面的单独文字？

I am trying to create a basic online store type of layout. Just very basic beginners CSS and HTML

我正在尝试创建一个基本的在线商店类型的布局。只是非常基本的初学者CSS和HTML

1 个解决方案

#1

Here is how to do that using flex styling. This is a great source for learning flex box (it's what I go to whenever I forget something).

以下是使用flex样式的方法。这是学习弹性盒子的一个很好的来源（这是我忘记的时候去的地方）。

#container{
   display: flex; /*specifies that the items in the container should abide by flex styling*/
   flex-direction: row; /*aligns the items in the container in a row*/
}

.imgContainer{
   text-align: center;  /*aligns the text in the center*/
   padding: 2%; /*adds some extra white space around images*/
}

<!-- container element for all of the content. 
It will line up the imgContainers in a row-->
<div id="container"> 
  <!--imgContainers will contain each img and text combination -->
  <div class="imgContainer">
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
    <p>This is an image</p>
  </div>
  <div class="imgContainer">
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
    <p>This is an image</p>
  </div>
  <div class="imgContainer">
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
    <p>This is an image</p>
  </div>
  <div class="imgContainer">
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
    <p>This is an image</p>
  </div>
</div>