Question

我想为节日制作某种程序页面。我想创建一个下面带有小文本的图像列表。我没有成功地将文本放在下面（它总是在图像旁边而不是在下面）。有人可以帮忙吗？

它应该是这样的：

[img1] [img2] [img3]

[text1] [text2] [text3]

[img4] [img5]

[text4] [text5]

......等等

图像的大小是固定的，因此只有2张图像的行与3张图像的行大小相同。

到目前为止，这是我在CSS中的代码：

对于文本（小和大）：

.prog_big{width:321px; height:434px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left; text-align:center} 

.prog_small{width:207px; height:283px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left;text-align:center}

对于图像（小和大）：

.poster_big{width:321px; height:434px; margin-left:30px; float:left} 

.poster_small{width:207px; height:283px; margin-left:30px; float:left}

Answer 1

我不是这个，这真的是一个CSS问题。您可以使用此类布局

在HTML中实现此目的

<figure>
 <img src="your_Image">
 <figcaption>text here</figcaption>
</figure>

Answer 2

分区和图片代码不是内联元素。由于这个原因，他们将在屏幕上为每个人创建一个新行。

使用css“display：inline-block”使它们内联。他们将并肩站在一起。

div.first-row div, div.second-row div {
  display:inline-block;
  float:left;
  width:100%;
}

div.first-row div {
  width: 33.3%;
}

div.second-row div {
  width: 50%;
}

div img {
  width:100%;
  height:auto;
}

p {
  text-align:center;
}

<div class='first-row'>
  <div>
    <img src='http://via.placeholder.com/140?text=image'>
    <p>Some Text Here</p>
  </div>
  <div>
    <img src='http://via.placeholder.com/140?text=image'>
    <p>Some Text Here</p>
  </div>
  <div>
    <img src='http://via.placeholder.com/140?text=image'>
    <p>Some Text Here</p>
  </div>
</div>

<div class='second-row'>
  <div>
    <img src='http://via.placeholder.com/140?text=image'>
    <p>Some Text Here</p>
  </div>
  <div>
    <img src='http://via.placeholder.com/140?text=image'>
    <p>Some Text Here</p>
  </div>
</div>

Answer 3

flexbox解决方案：

＆＃13;

.row {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
}

.column {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  margin-right: 10px;
}

p {
  width: 100%;
  text-align: center;
}

＆＃13;

<div class="row">
  <div class="column">
    <img src="http://placehold.it/100" />
    <p>Text 1</p>
  </div>
  <div class="column">
    <img src="http://placehold.it/100" />
    <p>Text 2</p>
  </div>
</div>
<div class="row">
  <div class="column">
    <img src="http://placehold.it/60" />
    <p>Text 3</p>
  </div>
  <div class="column">
    <img src="http://placehold.it/60" />
    <p>Text 4</p>
  </div>
  <div class="column">
    <img src="http://placehold.it/60" />
    <p>Text 5</p>
  </div>
</div>

＆＃13;

在css中对齐图像下方的文本

3 个答案: