Javascript 如何将HTML字符串插入div容器中，并将这些容器显示在"；“柔性包装”；一行

这些是我的HTML字符串，我的Javascript数组包含我试图显示的数据，以及一个for循环，它在数组中迭代并替换HTML字符串中的%data%。我要做的是将每本书的标题、描述和图像组合到一个容器中，然后在我的网页上的flex wrap行中显示每本书/容器。我还需要对齐所有图像，使它们在同一行上齐平。如果你知道怎么做，请告诉我。谢谢

var-HTMLbookStart=''；
var HTMLbookTitle='%data%'；
var HTMLbookDescription='%data%'；
var HTMLbookImages='
'；
var账簿={
“最新书籍”：[{
“标题”：“顿悟的四个步骤”，
“说明”：“成功产品的成功策略”，
“images”：[“images/Four_Steps.png”]
},
{
“标题”：“灵感”，
“说明”：“如何创造顾客喜爱的产品”，
“图像”：[“images/Inspired.png”]
},
{
“标题”：“决不分割差异”，
“描述”：“谈判就像你的生命取决于它”，
“images”：[“images/Never\u Split.png”]
}
],
“显示”：函数（）{
var book=books.recentBooks.length；
for（var r=0；r};添加您提到的CSS即可

为了正确对齐图像，我在中间的div中添加了一个
flex-grow

#books {
  display: flex;
  flex-wrap: wrap;
}

.book-entry {
  display: flex;
  flex-direction: column;
  text-align:center;
  width: 33%;
}

.book-entry div:nth-child(2) {
  flex-grow:1
}

用你的代码


var-HTMLbookStart=''；
var HTMLbookTitle='%data%'；
var HTMLbookDescription='%data%'；
var HTMLbookImages='
'；
var账簿={
“最新书籍”：[{
“标题”：“四个步骤”，
“描述”：“Lorem ipsum dolor sit amet，Concertetur adipiscing Elite.Proin fringilla sapien in sollicitudin pharetra.”，
“图像”：[“https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
},
{
“标题”：“灵感”，
“说明”：“如何创造顾客喜爱的产品”，
“图像”：[“https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
},
{
“标题”：“决不分割差异”，
“描述”：“谈判就像你的生命取决于它”，
“图像”：[“https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
},
{
“标题”：“决不分割差异”，
“描述”：“谈判就像你的生命取决于它”，
“图像”：[“https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
},
{
“标题”：“决不分割差异”，
“描述”：“谈判就像你的生命取决于它”，
“图像”：[“https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
},
{
“标题”：“决不分割差异”，
“描述”：“谈判就像你的生命取决于它”，
“图像”：[“https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
}
],
“显示”：函数（）{
var book=books.recentBooks.length；
for（var r=0；r

#书籍{
显示器：flex；
柔性包装：包装；
}
.簿记{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
宽度：33%；
}
.簿记分部：第n名子女（2）{
弹性增长：1
}

那么您当前的代码有什么问题？请您的问题更具体地说明您遇到的问题。@nnnnnn代码本身没有问题。我正在努力让我的队伍看起来更专业，更和谐。请看一下我的编辑，看看我指的是什么。谢谢。这很有魅力，但因为标题/描述的长度不同，所以图像是交错的，而不是整行齐平。你也有解决办法吗？@AaronLee我做了一个更新，你的意思是这样的吗？嘿@arcs，我试过了，但没有成功。我在原稿中添加了一个编辑，向您展示我们在这里处理的内容。Thanks@AaronLee你确定你复制了完整的CSS吗？因为使用
display:flex；弯曲方向：立柱
在book entry上添加
。book entry div:nth child（2）{flex grow:1}
对我很有用