【问题标题】:Loop overlaps images循环重叠图像
【发布时间】:2012-08-26 20:09:25
【问题描述】:

我是 JavaScript 的新手。我有一个函数应该循环相同的图像和文本 26 次。并像多段图像和文本一样显示它们。然而,我的循环与文本和图像重叠,如下所示。

我希望我的代码显示如下所示的图像。

我该如何解决这个问题?我的 JavaScript 代码如下所示

function getData() {
  var stringData = '';

  for (i = 0; i < 26; i++) {
    stringData = stringData + '<div><image src="img/sample-image.png" width="10% "height="10%" align="left" border="0"/>' + 'In this example a sample of the album photo on the site shall appear alongside a simple description of the album. To view the album select the album.</div><br/>';
  }

  document.getElementById("list-menu").innerHTML = '' + stringData + '';
}

【问题讨论】:

    标签: javascript image css-float alignment


    【解决方案1】:

    【讨论】:

    • 发生这种情况是因为您的图像“左对齐”。 align="left" 属性的处理方式与 css 中的 float: left; 语句一样。每当孩子漂浮在父母内部时,父母就会崩溃 - 几乎将其从文档中取出。这就是所有浮动图像相互交互的原因。让父级重新声明自己的最佳方法是 (1) 使用 clear: both; 作为 Daedalus 声明 (这会清除父级周围的任何浮动影响) 或 (2) overflow: hidden; (这迫使父母正确计算它的高度并包装它的孩子。)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-15
    • 2018-08-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多