javascript - 如何将 HTML 字符串插入到 div 容器中，并在 "flex-wrap"行中显示这些容器？

Question

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

var HTMLbookStart = '<div class="book-entry"></div>';
var HTMLbookTitle = '<div>%data%</div>';
var HTMLbookDescription = '<div><span class="date-text">%data%</span></div>';
var HTMLbookImages = '<div><br><img src="%data%"></div>';

var books = {
  "recentBooks": [{
      "title": "The Four Steps to the Epiphany",
      "description": "Successful Strategies for Products that Win",
      "images": ["images/Four_Steps.png"]
    },
    {
      "title": "Inspired",
      "description": "How to Create Products Customers Love",
      "images": ["images/Inspired.png"]
    },
    {
      "title": "Never Split the Difference",
      "description": "Negotiating As If Your Life Depended On It",
      "images": ["images/Never_Split.png"]
    }
  ],
  "display": function() {

    var book = books.recentBooks.length;
    for (var r = 0; r < book; r++) {
      $("#mybooks").append(HTMLbookStart);
      var formattedBookTitle = HTMLbookTitle.replace("%data%", books.recentBooks[r].title);
      var formattedBookDescription = HTMLbookDescription.replace("%data%", books.recentBooks[r].description);
      var formattedBookImages = HTMLbookImages.replace("%data%", books.recentBooks[r].images);
      $(".book-entry:last").append(formattedBookTitle + formattedBookDescription + formattedBookImages);
    }
  }
};

编辑

The final output should look something like this. I'm able to get all the books in a flex-wrap row, but none of the images are aligned. Does anyone know how to fix this?

这就是我目前用来实现此效果的 CSS。如果你能让它看起来更专业，请告诉我。

#mybooks {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.book-entry {
  text-align:center;
  width: 10%
}

Answer 1

添加您提到的 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 = '<div class="book-entry"></div>';
var HTMLbookTitle = '<div>%data%</div>';
var HTMLbookDescription = '<div><span class="date-text">%data%</span></div>';
var HTMLbookImages = '<div><br><img src="%data%"></div>';

var books = {
  "recentBooks": [{
      "title": "The Four Steps",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla sapien in sollicitudin pharetra.",
      "images": ["https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
    },
    {
      "title": "Inspired",
      "description": "How to Create Products Customers Love",
      "images": ["https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
    },
    {
      "title": "Never Split the Difference",
      "description": "Negotiating As If Your Life Depended On It",
      "images": ["https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
    },
    {
      "title": "Never Split the Difference",
      "description": "Negotiating As If Your Life Depended On It",
      "images": ["https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
    },
    {
      "title": "Never Split the Difference",
      "description": "Negotiating As If Your Life Depended On It",
      "images": ["https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
    },
    {
      "title": "Never Split the Difference",
      "description": "Negotiating As If Your Life Depended On It",
      "images": ["https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"]
    }
  ],
  "display": function() {

    var book = books.recentBooks.length;
    for (var r = 0; r < book; r++) {
      $("#books").append(HTMLbookStart);
      var formattedBookTitle = HTMLbookTitle.replace("%data%", books.recentBooks[r].title);
      var formattedBookDescription = HTMLbookDescription.replace("%data%", books.recentBooks[r].description);
      var formattedBookImages = HTMLbookImages.replace("%data%", books.recentBooks[r].images);
      $(".book-entry:last").append(formattedBookTitle + formattedBookDescription + formattedBookImages);
    }
  }
};

books.display()

#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
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="books"></div>