javascript - 将 Img 标签与每个图像下方的 p 标签并排对齐 - CSS

Question

我正在尝试将图像文件与其正下方的图像描述并排对齐。这是我的代码:

for (var i = 0; i < imgFilePathArray.length; i++) {

  //html & css
  var elementID = 'img' + (i+1).toString();
  var element = document.createElement('img');
  element.src = imgFilePathArray[i];
  console.log(imgFilePathArray[i]);
  element.id = elementID;
  document.body.appendChild(element);

  document.getElementById(elementID).style.width='50%';

  element.style.height = 300;
  element.style.display = 'inline-block';


  if (i > 1) {
    var errorP; 
    if (i%2==0) {
      var frontErrorArray = errorInfo[buildVersion[buildCount]].split("$")[0];
      var errorString = "";
      errorString = frontErrorArray.toString();  

       //html & css
      errorP = document.createElement('p');
      var errorTextNode = document.createTextNode(errorString);
      errorP.appendChild(errorTextNode);

    }else{
      var backErrorArray = errorInfo[buildVersion[buildCount]].split("$")[1];
      var errorString = "";
      errorString = backErrorArray.toString();
      console.log(errorInfo[buildVersion[buildCount]].split("$")[1]);

      //html & css
      errorP = document.createElement('p');
      var errorTextNode = document.createTextNode(errorString);
      errorP.appendChild(errorTextNode);



      buildCount = buildCount + 1;
    }
    document.body.appendChild(errorP);
  };

}

上面的执行给出了如下图所示的布局:

我希望图片并排放置，而文本则位于每张图片的正下方。知道我应该修改什么 css 样式来实现该状态吗？

Answer 1

基本上，您需要让包含图像和文本的 div 具有 css 样式 float:left 才能实现此目的。