Question

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

Answer 1

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

#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>

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

1 个答案: