显示每个相册的所有照片后换行答案

【问题标题】：Line break after displaying all the photos of each album显示每个相册的所有照片后换行
【发布时间】：2021-06-22 11:21:49
【问题描述】：

我使用 Flickr 的 API 从 Flickr 获取图像。我正在显示专辑名称，然后是相应的图片，然后是下一张专辑。一切都很顺利，但是在显示每个相册的所有照片后需要有一个换行符，以便下一个相册的名称将显示在下一行。但目前下一张专辑的名称显示在上一张专辑的最后一张照片之后。我试过在不同的地方插入 div.append('break tag') 但没有一个能解决这个问题。请帮忙。我附上了页面现在的样子。

<html>
<body height="200" width="345">
<h2><div class="img-container" id="flickr"></div></h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=d4484e060a112d188a27a51ea64f427e&user_id=13796773%40N04&format=json&nojsoncallback=1",
  "method": "GET",
}
const flickr = $("#flickr");  // the wrapping div, where all albums divs will be appended
$.ajax(settings).done(function(data) {
  $.each(data.photosets.photoset, function(i, gp) {
    const div = $("<div/>");  // a div for each album
    flickr.append(div);
    const albumname = $("<h2/>");  // headline for the album
    albumname.text(gp.title._content + " Gallery");
    div.append(albumname);
    var id = gp.id; 
    var settings1 = {
      "async": true, 
      "crossDomain": true,
      "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=d4484e060a112d188a27a51ea64f427e&photoset_id=" + id + "&user_id=13796773%40N04&format=json&nojsoncallback=1",
      "method": "GET",
    }
    $.ajax(settings1).done(function(data) {
      $.each(data.photoset.photo, function(i, gpr) {
        var farmId = gpr.farm;
        var serverId = gpr.server; 
        var id = gpr.id;
        var secret = gpr.secret;
        div.append('<center><a href="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg" target="_blank"><img style="border:1px solid #000000"  src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/></a></center>');  // append images to album div
      }); 
    });
  });
});   
</script> 
</body>
</html>
<style>
img {max-height:125px; margin:3px; float: left; border:1px solid #dedede;} 
</style>

Here is how it looks

【问题讨论】：

结构已经没问题了，每个专辑都包含在一个分组div 容器中。问题是图像是浮动的，所以你需要正确清除浮动，这样下一个div就不会滑动到图像“旁边”。 css-tricks.com/the-how-and-why-of-clearing-floats
不是只适用于img元素吗？
有没有我可以并排获得图像但不能获得下一个专辑名称的方法？
“它不只适用于 img 元素吗？” - 浮动 property 适用于图像，但它影响不仅仅是他们。 “有没有我可以并排获得图像，但不能获得下一张专辑名称？” - 是的，就像我说的：清除浮动。
检查css-tricks.com/all-about-floats，如果您无法理解浮动的实际工作原理。

标签： javascript html jquery css flickr

【解决方案1】：

使用样式display:block

its Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width

img {最大高度：125px;边距：3px；显示：块浮动：左；边框：1px 实心#dedede;}

它的工作

<html>
<body height="200" width="345">
<h2><div class="img-container" id="flickr"></div></h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=d4484e060a112d188a27a51ea64f427e&user_id=13796773%40N04&format=json&nojsoncallback=1",
  "method": "GET",
}
const flickr = $("#flickr");  // the wrapping div, where all albums divs will be appended
$.ajax(settings).done(function(data) {
  $.each(data.photosets.photoset, function(i, gp) {
    const div = $("<div/>");  // a div for each album
    flickr.append(div);
    const albumname = $("<h2/>");  // headline for the album
    albumname.text(gp.title._content + " Gallery");
    div.append(albumname);
    var id = gp.id; 
    var settings1 = {
      "async": true, 
      "crossDomain": true,
      "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=d4484e060a112d188a27a51ea64f427e&photoset_id=" + id + "&user_id=13796773%40N04&format=json&nojsoncallback=1",
      "method": "GET",
    }
    $.ajax(settings1).done(function(data) {
      $.each(data.photoset.photo, function(i, gpr) {
        var farmId = gpr.farm;
        var serverId = gpr.server; 
        var id = gpr.id;
        var secret = gpr.secret;
        div.append('<center><a href="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg" target="_blank"><img style="border:1px solid #000000"  src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/></a></center>');  // append images to album div
      }); 
    });
  });
});   
</script> 
</body>
</html>
<style>
img {max-height:125px; margin:3px; display:block float: left; border:1px solid #dedede;} 
</style>

【讨论】：