将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来实现这一点。