Question

我是Wordpress的新手，目前想在页面上添加文本对齐的多个图像。我考虑过要用一个表来做，但是不确定这是否是最好的解决方案。病态地描述了我的想法。

1。第1行。单元格图片

1。第2行。单元格标题文本+正文文本，用于简短的图片说明

我需要多次这样做，所以我认为这是最简单的方法...

现在，我尝试使用TablePress插件来做到这一点，唯一的问题是我无法为每次销售添加标题文本，并且无法显式更改标题的字体。

TablePress是否有替代方法，允许我更改单元格中文本的字体和颜色？

还是应该手动执行？非常感谢您的帮助。

谢谢

Answer 1

这是您要找的吗？

.container {
  width: 100%;
}

.image, .description {
  width: 50%;
  float: left;
  box-sizing: border-box;
}

.image img {
  width: 100%;
}

.description {
 padding: 15px;
}

<div class="container">
  <div class="image">
    <img src="https://preview.ibb.co/ioNAzT/img02.jpg">
  </div>
  <div class="description">
    <h2>Image title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut mollis lacus. Pellentesque euismod mauris justo. Aenean eu sagittis ex. Suspendisse potenti. Duis velit lacus, vestibulum sit amet ex sed, mattis scelerisque metus.</p>
  </div>
</div>

Answer 2

我不会使用表格，而是使用flexbox来存储产品。有关示例，请参见下文。

{  
  "DefaultCurrency":"USD",
  "UserName":"data",
 "Photograph":"data",
 "PhotographThumb":"data",
 "Group":"data",
 "Summary":"data",
 "ResumeText":"data",
 "RollupListMembership":{  
  "RollupCode":"data"
},
"CustomFields":[  
   {  
      "FieldName":"Major",
      "Values":{  
         "dsadas":"data"
      }
   },
   {  
      "FieldName":"Years of Experience",
      "Values":{  
         "rewrew":"dsa"
      }
   },
   {  
     "FieldName":"Executive Type",
     "Values":{  
        "test":"data"
     }
   }
  ]
}

.row {
  display: flex;
  justify-content: space-around; /* Horizontal alignment */
}

article {
  display: flex;
  flex-direction: column;
  align-items: center; /* Horizontal alignment */
}

在Wordpress中使图像与文本对齐的最佳方法？

2 个答案: